-
Notifications
You must be signed in to change notification settings - Fork 4
/
Education.html
147 lines (126 loc) · 4.93 KB
/
Education.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Education levels of Indian MPs</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
<script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Know Your Members of Parliament</h1>
<h3 style="color:grey;"><a href="TotalAssets.html">Assets</a> | <a href="index.html">Criminal Cases</a> | <a class="active" href="#">Education</a> | <a href="ElectionExpense.html">Election Expenses</a> | <a href="Party.html">Party</a> | <a href="Liabilities.html">Pending Loans</a> | <a href="SexRatio.html">Sex Ratio</a></h3>
<p style="font-size:10px">Based on Affidavits submitted to Election Commision of India during 2014 elections</p>
<p style="font-size:10px">Hover over the map to see the name of MP</p>
<script type="text/javascript">
var width = 960,
height = 700;
// Setting color domains(intervals of values) for our map
var color_domain = [1, 10, 50, 100, 125, 150, 200];
var ext_color_domain = [1, 10, 50, 100, 125, 150, 200];
var legend_labels = ["Illiterate", "School", "Graduate", "Graduate Professional", "Post Graduate", "Doctorate", "Others"];
var color = d3.scale.threshold()
.domain(color_domain)
.range(["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f"]);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("margin", "10px auto");
var projection = d3.geo.mercator()
.center([80, 27.5])
.scale(1200);
var path = d3.geo.path().projection(projection);
var formatter = d3.format(",");
//Reading map file and data
queue()
.defer(d3.json, "maps/india.json")
.defer(d3.csv, "data/affidavits.csv")
.await(ready);
//Start of Choropleth drawing
function ready(error, map, data) {
var rateById = {};
var nameById = {};
data.forEach(function(d) {
rateById[d.Constituency.toLowerCase()] = d.Education;
nameById[d.Constituency.toLowerCase()] = d.Candidate;
});
//Drawing Choropleth
svg.append("g")
.attr("class", "region")
.selectAll("path")
.data(topojson.feature(map, map.objects.india_pc_2014).features) //<-- in case topojson.v1.js
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
if (d.properties.PC_NAME == null) { return "magenta"; }
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Illiterate") {
return color(1);
}
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Literate" ||
rateById[d.properties.PC_NAME.toLowerCase()] == "5th Pass" ||
rateById[d.properties.PC_NAME.toLowerCase()] == "8th Pass" ||
rateById[d.properties.PC_NAME.toLowerCase()] == "10th Pass" ||
rateById[d.properties.PC_NAME.toLowerCase()] == "12th Pass") {
return color(10);
}
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Graduate") {
return color(50);
}
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Graduate Professional") {
return color(100);
}
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Post Graduate") {
return color(125);
}
else if (rateById[d.properties.PC_NAME.toLowerCase()] == "Doctorate") {
return color(150);
}
else return color(200);
})
.style("opacity", 0.8)
//Adding mouseevents
.on("mouseover", function(d) {
d3.select(this).transition().duration(300).style("opacity", 1);
div.transition().duration(300)
.style("opacity", 1)
div.html(
"<p><strong>" + d.properties.PC_NAME + "</strong></p>" +
"<table><tbody><tr><td class='wide'>MP in 2014:</td><td>" + nameById[d.properties.PC_NAME.toLowerCase()] + "</td></tr>" +
"<tr><td>Education:</td><td>" + rateById[d.properties.PC_NAME.toLowerCase()] + "</td></tr>" +
"</td></tr></tbody></table>"
)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY -30) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition().duration(300)
.style("opacity", 0.8);
div.transition().duration(300)
.style("opacity", 0);
})
}; // <-- End of Choropleth drawing
//Adding legend for our Choropleth
var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");
var ls_w = 20, ls_h = 20;
legend.append("rect")
.attr("x", 20)
.attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function(d, i) { return color(d); })
.style("opacity", 0.8);
legend.append("text")
.attr("x", 50)
.attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
.text(function(d, i){ return legend_labels[i]; });
</script>
</body>
</html>