A cartogram of rectangular blocks displaying the relative weight of different states of India based on different statistical parameters.
Copyright © 2017-20, Sandhya Pillai - MIT License
A cartogram of rectangular blocks displaying the relative weight of different states of India based on different statistical parameters.
Copyright © 2017-20, Sandhya Pillai - MIT License
height:560 | |
license:mit |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>anilnair.xyz</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> | |
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
<style type="text/css" media="screen">@import "style.css";</style> | |
<link rel="stylesheet" href="stateMap.css"> | |
</head> | |
<body> | |
<div id="panels"> | |
<div id="map"> | |
<div id="select"></div> | |
</div> | |
</div> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="//d3js.org/d3-queue.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script src="stateCarto.js"></script> | |
<script src="stateMulti.js"></script> | |
</body> | |
</html> |
name | alias | id | area | area_percent | population | pop_percent | GDP | LS_Seats | RS_Seats | LA_Seats | 1971Pop | EC_LA | EC_Total | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Andaman and Nicobar | Andaman and Nicobar | IND-2474 | 8249 | 0.25 | 379944 | 0.03 | 6200 | 1 | 0 | 0 | 379944 | 0 | 708 | |
Andhra Pradesh | AP | IND-2441 | 275045 | 8.37 | 84673556 | 7.05 | 910000 | 42 | 18 | 294 | 43502708 | 43512 | 85992 | |
Arunachal Pradesh | AR | IND-3299 | 83743 | 2.55 | 1382611 | 0.11 | 14000 | 2 | 1 | 60 | 467511 | 480 | 2604 | |
Assam | AS | IND-2477 | 78438 | 2.39 | 31169272 | 2.58 | 159000 | 14 | 7 | 126 | 14625152 | 14616 | 29484 | |
Bihar | BR | IND-3258 | 94163 | 2.86 | 103804637 | 8.58 | 402000 | 40 | 16 | 243 | 42126236 | 42039 | 81687 | |
Chandigarh | CH | IND-2427 | 114 | 0 | 1054686 | 0.09 | 29000 | 1 | 0 | 0 | 1054686 | 0 | 708 | |
Chhattisgarh | CG | IND-3260 | 135192 | 4.11 | 25540196 | 2.11 | 185000 | 11 | 5 | 90 | 11637494 | 11610 | 22938 | |
Dadra and Nagar Haveli | DN | IND-2445 | 491 | 0.01 | 342853 | 0.03 | 2440 | 1 | 0 | 0 | 342853 | 0 | 708 | |
Daman and Diu | DD | IND-3504 | 111 | 0 | 242911 | 0.02 | 1059 | 1 | 0 | 0 | 242911 | 0 | 708 | |
Delhi | DL | IND-2428 | 1483 | 0.05 | 16753235 | 1.38 | 451000 | 7 | 3 | 70 | 4065698 | 4060 | 11140 | |
Goa | GA | IND-3265 | 3702 | 0.11 | 1457723 | 0.12 | 49000 | 2 | 1 | 40 | 795120 | 800 | 2924 | |
Gujarat | GJ | IND-3264 | 196244 | 5.97 | 60383628 | 5 | 915000 | 26 | 11 | 182 | 26697475 | 26754 | 52950 | |
Haryana | HR | IND-2430 | 44212 | 1.34 | 25353081 | 2.09 | 389000 | 10 | 5 | 90 | 10036808 | 10080 | 20700 | |
Himachal Pradesh | HP | IND-2429 | 55673 | 1.69 | 6864602 | 0.57 | 83000 | 4 | 3 | 68 | 3460434 | 3468 | 8424 | |
Jammu and Kashmir | JK | IND-2431 | 222236 | 6.76 | 12548926 | 1.04 | 87000 | 6 | 4 | 87 | 6300000 | 6264 | 13344 | |
Jharkhand | JH | IND-3256 | 79716 | 2.42 | 32966238 | 2.72 | 173000 | 14 | 6 | 81 | 14227133 | 14256 | 28416 | |
Karnataka | KA | IND-2446 | 191791 | 5.83 | 61130704 | 5.05 | 702000 | 28 | 12 | 224 | 29299014 | 29344 | 57664 | |
Kerala | KL | IND-2442 | 38852 | 1.18 | 33387677 | 2.76 | 396000 | 20 | 9 | 140 | 21347375 | 21280 | 41812 | |
Lakshadweep | Lakshadweep | IND-2443 | 30 | 0 | 64429 | 0.01 | 407 | 1 | 0 | 0 | 64429 | 0 | 708 | |
Madhya Pradesh | MP | IND-3261 | 308252 | 9.38 | 72597565 | 6 | 508000 | 29 | 11 | 230 | 30016625 | 30130 | 58450 | |
Maharashtra | MH | IND-2447 | 307713 | 9.36 | 112372972 | 9.28 | 1680000 | 48 | 19 | 288 | 50412235 | 50400 | 97836 | |
Manipur | MN | IND-2478 | 22327 | 0.68 | 2721756 | 0.22 | 14000 | 2 | 1 | 60 | 1072753 | 1080 | 3204 | |
Meghalaya | ML | IND-2489 | 22429 | 0.68 | 2964007 | 0.24 | 22000 | 2 | 1 | 60 | 1011699 | 1020 | 3144 | |
Mizoram | MZ | IND-3300 | 21081 | 0.64 | 1091014 | 0.09 | 10000 | 1 | 1 | 40 | 332390 | 320 | 1736 | |
Nagaland | NL | IND-2479 | 16579 | 0.5 | 1980602 | 0.16 | 18000 | 1 | 1 | 60 | 516499 | 540 | 1956 | |
Orissa | OR | IND-2444 | 155707 | 4.74 | 41947358 | 3.47 | 272000 | 21 | 10 | 147 | 21944615 | 21903 | 43851 | |
Puducherry | PY | IND-3262 | 490 | 0.01 | 1244464 | 0.1 | 21000 | 1 | 1 | 30 | 471707 | 480 | 1896 | |
Punjab | PB | IND-3249 | 50362 | 1.53 | 27704236 | 2.3 | 317000 | 13 | 7 | 117 | 13551060 | 13572 | 27732 | |
Rajasthan | RJ | IND-3250 | 342239 | 10.41 | 68621012 | 5.67 | 570000 | 25 | 10 | 200 | 25765806 | 25800 | 50580 | |
Sikkim | SK | IND-3259 | 7096 | 0.22 | 607688 | 0.05 | 12000 | 1 | 1 | 32 | 209843 | 224 | 1640 | |
Tamil Nadu | TN | IND-3263 | 130060 | 3.96 | 72138958 | 5.96 | 976000 | 39 | 18 | 234 | 41199168 | 41184 | 81540 | |
Tripura | TR | IND-3301 | 10486 | 0.32 | 3671032 | 0.3 | 27000 | 2 | 1 | 60 | 1556342 | 1560 | 3684 | |
Uttaranchal | UK | IND-3254 | 53483 | 1.63 | 10116752 | 0.84 | 123000 | 5 | 3 | 70 | 4491239 | 4480 | 10144 | |
Uttar Pradesh | UP | IND-3253 | 240928 | 7.33 | 199281477 | 16.49 | 976000 | 80 | 31 | 403 | 83849905 | 83824 | 162412 | |
West Bengal | WB | IND-3257 | 88752 | 2.7 | 91347736 | 7.55 | 800000 | 42 | 16 | 294 | 44312011 | 44394 | 85458 |
function dataPrep(states, recipe, parameter, width, height, margin) { | |
// Parameters | |
var cgX = width*recipe.cgX; | |
var cgY = height*recipe.cgY; | |
var scale = recipe.scale*width/800*height/700; | |
// Color codes for states | |
colorCode(states, parameter); | |
states.map(function(state) { | |
state.space = state[parameter]*scale; | |
}); | |
recipe.rows.forEach(function(f) { | |
var getParam = function(d) { return (d.position=="absolute")?d.offsetY*cgY:d.master; } | |
placeRow(f.set, f.width*width, states, f.offset*cgX, f.position, getParam(f), margin); | |
}); | |
recipe.singles.forEach(function(f) { | |
placeRelative(states, f.unit, f.aspect, f.master, f.direction, f.position, f.distance+margin); | |
}); | |
states.map(function(state) { | |
state.cx = state.x + state.width/2; | |
state.cy = state.y + state.height/2; | |
}); | |
} | |
function createSVG(element, width, height, states) { | |
d3.select(element).select("svg").remove(); | |
var svg = d3.select(element).append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.select(element).select("#tooltip").remove(); | |
var div = d3.select(element).append("div") | |
.attr("id", "tooltip") | |
.style("opacity", 0); | |
var selectState = svg.selectAll("g").data(states).enter().append("g").attr("class", "state"); | |
var selectRect = selectState.append("rect"); | |
var selectText = selectState.append("text"); | |
selectRect | |
.style("fill", function(d) { return d.color; }) | |
.attr({ | |
rx: 5, | |
ry: 5, | |
x: function (d) { return d.x; }, | |
y: function (d) { return d.y; }, | |
width: function (d) { return d.width; }, | |
height: function (d) { return d.height; } | |
}); | |
selectText | |
.attr("class", function(d) { return "label " + d.id; }) | |
.attr("dy", ".35em") | |
.attr("transform", function(d) { return "translate(" + [d.cx, d.cy] + ")"; }); | |
} | |
function stateCarto(states, recipe, parameter) { | |
var width = 800; | |
var height = 700; | |
var margin = 2; | |
var transit = false; | |
function render(selection) { | |
selection.each(function() { | |
dataPrep(states, recipe, parameter, width, height, margin); | |
if (!transit) { | |
createSVG(this, width, height, states); | |
} | |
var svg = d3.select(this).select("svg") | |
var div = d3.select(this).select("#tooltip") | |
var selectRect = svg.selectAll("g rect").data(states); | |
var selectText = svg.selectAll("g text").data(states); | |
if (transit) { | |
selectRect.transition().duration(transit) | |
.attr({ | |
x: function (d) { return d.x; }, | |
y: function (d) { return d.y; }, | |
width: function (d) { return d.width; }, | |
height: function (d) { return d.height; } | |
}); | |
selectText.transition().duration(transit) | |
.attr("transform", function(d) { return "translate(" + [d.cx, d.cy] + ")"; }); | |
} | |
selectText | |
.text(function(d) { return (d.name == d.alias)?d.name: | |
(d.width > d.name.length*8)?d.name: | |
(d.width > 16)?d.alias:''; }); | |
selectRect | |
.on("mouseover", function(d) { | |
d3.select("#tooltip").transition() | |
.duration(200) | |
.style("opacity", .9); | |
d3.select("#tooltip").html("<h3>"+(d.name)+"</h3><table>"+ | |
"<tr><td>"+parameter+"</td><td>"+(d[parameter])+"</td></tr>"+ | |
"</table>") | |
.style("left", (d3.event.pageX-document.getElementById('map').offsetLeft + 20) + "px") | |
.style("top", (d3.event.pageY-document.getElementById('map').offsetTop - 60) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
d3.select("#tooltip").transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
}); | |
} // render | |
render.height = function(value) { | |
if (!arguments.length) return height; | |
height = value; | |
return render; | |
}; | |
render.width = function(value) { | |
if (!arguments.length) return width; | |
width = value; | |
return render; | |
}; | |
render.transit = function(value) { | |
if (!arguments.length) return transit; | |
transit = value; | |
return render; | |
}; | |
return render; | |
} // stateMap | |
function getArea(bounds) { | |
return (bounds[1][0]-bounds[0][0])*(bounds[1][1]-bounds[0][1]); | |
} | |
function placeRow(set, width, states, centre, align, param, margin) { | |
var setStates = states.filter(function (d) { return set.indexOf(d.name) > -1 }); | |
var space = d3.sum(setStates, function(d) { return d.space; }); | |
var height = space / width; | |
var yloc = (align=="absolute")?(param - height/2):0; | |
if (align=="above") { | |
var bigB = states.filter(function (d) { return d.name==param }).pop(); | |
yloc = bigB.y - height - margin; | |
} else if (align=="below") { | |
var bigB = states.filter(function (d) { return d.name==param }).pop(); | |
yloc = bigB.y + bigB.height + margin; | |
} | |
var xloc = centre - width/2; | |
set.forEach(function(name) { | |
var state = setStates.filter(function (d) { return d.name==name }).pop(); | |
state.height = (state.space == 0)? 1: height; | |
state.width = (state.space == 0)? 1: state.space / state.height; | |
state.x = xloc; | |
state.y = yloc; | |
xloc += state.width + margin; | |
}); | |
} | |
function placeRelative(states, target, aspect, master, direction, position, distance) { | |
var state = states.filter(function (d) { return d.name==target }).pop(); | |
var bigB = states.filter(function (d) { return d.name==master }).pop(); | |
var width = Math.sqrt(aspect*state.space) | |
state.width = (state.space == 0)? 1: width; | |
state.height = (state.space == 0)? 1: state.space / width; | |
var xvert = (position=="start")?bigB.x:(position=="middle")?(bigB.x+bigB.width/2-state.width/2):(bigB.x+bigB.width-state.width); | |
var yhorz = (position=="start")?bigB.y:(position=="middle")?(bigB.y+bigB.height/2-state.height/2):(bigB.y+bigB.height-state.height); | |
state.x = (direction=="west")?(bigB.x-state.width-distance):(direction=="east")?(bigB.x+bigB.width+distance):xvert; | |
state.y = (direction=="north")?(bigB.y-state.height-distance):(direction=="south")?(bigB.y+bigB.height+distance):yhorz; | |
} |
{ | |
"cgX" : 0.4, | |
"cgY" : 0.45, | |
"scale" : 0.020, | |
"rows": [ | |
{ | |
"set" : ["Gujarat", "Madhya Pradesh", "Chhattisgarh", "Jharkhand", "West Bengal"], | |
"position" : "absolute", | |
"width" : 0.65, | |
"offset" : 1, | |
"offsetY" : 1 | |
}, | |
{ | |
"set" : ["Rajasthan", "Uttar Pradesh", "Bihar"], | |
"position" : "above", | |
"width" : 0.65, | |
"offset" : 1.1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Haryana", "Delhi", "Uttaranchal"], | |
"position" : "above", | |
"width" : 0.30, | |
"offset" : 0.85, | |
"master" : "Rajasthan" | |
}, | |
{ | |
"set" : ["Punjab", "Himachal Pradesh"], | |
"position" : "above", | |
"width" : 0.20, | |
"offset" : 0.85, | |
"master" : "Haryana" | |
}, | |
{ | |
"set" : ["Jammu and Kashmir"], | |
"position" : "above", | |
"width" : 0.07, | |
"offset" : 0.85, | |
"master" : "Punjab" | |
}, | |
{ | |
"set" : ["Maharashtra", "Orissa"], | |
"position" : "below", | |
"width" : 0.5, | |
"offset" : 1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Karnataka", "Andhra Pradesh"], | |
"position" : "below", | |
"width" : 0.4, | |
"offset" : 1, | |
"master" : "Maharashtra" | |
}, | |
{ | |
"set" : ["Kerala", "Tamil Nadu"], | |
"position" : "below", | |
"width" : 0.3, | |
"offset" : 1, | |
"master" : "Karnataka" | |
} | |
], | |
"singles": [ | |
{ | |
"unit" : "Chandigarh", | |
"aspect" : 1, | |
"master" : "Punjab", | |
"direction": "west", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Puducherry", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Daman and Diu", | |
"aspect" : 1, | |
"master" : "Maharashtra", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Dadra and Nagar Haveli", | |
"aspect" : 1, | |
"master" : "Daman and Diu", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Andaman and Nicobar", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 200 | |
}, | |
{ | |
"unit" : "Lakshadweep", | |
"aspect" : 1, | |
"master" : "Kerala", | |
"direction": "west", | |
"position" : "middle", | |
"distance" : 100 | |
}, | |
{ | |
"unit" : "Goa", | |
"aspect" : 1, | |
"master" : "Karnataka", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Assam", | |
"aspect" : 2, | |
"master" : "Bihar", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Sikkim", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Arunachal Pradesh", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Manipur", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Nagaland", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Mizoram", | |
"aspect" : 1, | |
"master" : "Manipur", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Tripura", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Meghalaya", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
} | |
] | |
} |
{ | |
"cgX" : 0.4, | |
"cgY" : 0.48, | |
"scale" : 430, | |
"rows": [ | |
{ | |
"set" : ["Gujarat", "Madhya Pradesh", "Chhattisgarh", "Jharkhand", "West Bengal"], | |
"position" : "absolute", | |
"width" : 0.65, | |
"offset" : 1, | |
"offsetY" : 1 | |
}, | |
{ | |
"set" : ["Rajasthan", "Uttar Pradesh", "Bihar"], | |
"position" : "above", | |
"width" : 0.65, | |
"offset" : 1.1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Haryana", "Delhi", "Uttaranchal"], | |
"position" : "above", | |
"width" : 0.25, | |
"offset" : 0.85, | |
"master" : "Rajasthan" | |
}, | |
{ | |
"set" : ["Punjab", "Himachal Pradesh"], | |
"position" : "above", | |
"width" : 0.20, | |
"offset" : 0.85, | |
"master" : "Haryana" | |
}, | |
{ | |
"set" : ["Jammu and Kashmir"], | |
"position" : "above", | |
"width" : 0.07, | |
"offset" : 0.85, | |
"master" : "Punjab" | |
}, | |
{ | |
"set" : ["Maharashtra", "Orissa"], | |
"position" : "below", | |
"width" : 0.5, | |
"offset" : 1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Karnataka", "Andhra Pradesh"], | |
"position" : "below", | |
"width" : 0.4, | |
"offset" : 1, | |
"master" : "Maharashtra" | |
}, | |
{ | |
"set" : ["Kerala", "Tamil Nadu"], | |
"position" : "below", | |
"width" : 0.3, | |
"offset" : 1, | |
"master" : "Karnataka" | |
} | |
], | |
"singles": [ | |
{ | |
"unit" : "Chandigarh", | |
"aspect" : 1, | |
"master" : "Punjab", | |
"direction": "west", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Puducherry", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Daman and Diu", | |
"aspect" : 1, | |
"master" : "Maharashtra", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Dadra and Nagar Haveli", | |
"aspect" : 1, | |
"master" : "Daman and Diu", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Andaman and Nicobar", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 200 | |
}, | |
{ | |
"unit" : "Lakshadweep", | |
"aspect" : 1, | |
"master" : "Kerala", | |
"direction": "west", | |
"position" : "middle", | |
"distance" : 100 | |
}, | |
{ | |
"unit" : "Goa", | |
"aspect" : 1, | |
"master" : "Karnataka", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Assam", | |
"aspect" : 2, | |
"master" : "Bihar", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Sikkim", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Arunachal Pradesh", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Manipur", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Nagaland", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Mizoram", | |
"aspect" : 1, | |
"master" : "Manipur", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Tripura", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Meghalaya", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
} | |
] | |
} |
#map { position: relative; min-height: 500px; background-color: #20242d; font-family: "Montserrat", sans-serif; } | |
.state rect { stroke: #a9a9a9; stroke-width: 1px; } | |
.state:hover rect { stroke: #777777; stroke-width: 2px; fill-opacity: .7; } | |
.label { | |
fill: #fff; | |
font-size: 12px; | |
font-weight: 300; | |
text-anchor: middle; | |
pointer-events: none; | |
} | |
#select { | |
position:absolute; | |
left: 700px; | |
top: 100px; | |
font: 24px sans-serif; | |
color: #bbb; | |
} | |
#tooltip h3 { | |
margin:2px; | |
font-size:14px; | |
} | |
#tooltip h4 { | |
margin:2px; | |
font-size:10px; | |
} | |
#tooltip { | |
position: absolute; | |
background:rgba(0,0,0,0.8); | |
text-align: left; | |
border:1px; | |
border-radius:5px; | |
font: 12px sans-serif; | |
width:auto; | |
padding:4px; | |
color:white; | |
opacity:0; | |
pointer-events: none; | |
} | |
#tooltip table{ | |
table-layout:fixed; | |
} | |
#tooltip tr td{ | |
padding:2px; | |
margin:0; | |
} |
(function() { | |
d3.queue() | |
.defer(d3.csv, "IndiaStates.csv") | |
.defer(d3.json, "statePop.json") | |
.defer(d3.json, "stateGDP.json") | |
.defer(d3.json, "stateLS.json") | |
.defer(d3.json, "stateRS.json") | |
.await(function(error, states, recipePop, recipeGDP, recipeLS, recipeRS) { | |
if (error) throw error; | |
csvType(states); | |
var recipe = { "population": recipePop, "GDP": recipeGDP, "LS_Seats": recipeLS, "RS_Seats": recipeRS }; | |
// Radio HTML | |
d3.select("#select").style("top", "20px").call(selectFilter()); | |
var parameter = d3.select('#select input[name="parameter"]:checked').node().value; | |
// Map render | |
var map = stateCarto(states, recipe[parameter], parameter).width(640).height(560); | |
d3.select("#map").call(map); | |
// On change of selection re-render | |
d3.selectAll("#select input[name=parameter]").on("change", function() { | |
parameter = d3.select('#select input[name="parameter"]:checked').node().value; | |
map = stateCarto(states, recipe[parameter], parameter).width(640).height(560).transit(1000); | |
d3.select("#map").call(map); | |
}); | |
}); | |
}()); | |
function csvType(states) { | |
states.forEach(function(d) { | |
d.name = d.name; | |
d.alias = d.alias; | |
d.id = d.id; | |
d.population = +d.population; | |
d.GDP = +d.GDP; | |
d.LS_Seats = +d.LS_Seats; | |
d.RS_Seats = +d.RS_Seats; | |
}); | |
} | |
function colorCode(data, filter) { | |
var color = ["#fc9272", "#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15"]; | |
data.forEach(function(d) { | |
d.color = color[Math.floor(Math.random() * 5)]; | |
}); | |
} | |
function selectFilter() { | |
function render(selection) { | |
selection.each(function() { | |
d3.select(this).html("<form>"+ | |
"<input type='radio' name='parameter' value='population' checked> Population<br>"+ | |
"<input type='radio' name='parameter' value='GDP'> GDP<br>"+ | |
"<input type='radio' name='parameter' value='LS_Seats'> LS Seats<br>"+ | |
"<input type='radio' name='parameter' value='RS_Seats'> RS Seats"+ | |
"</form>"); | |
}); | |
} // render | |
return render; | |
} // selectFilter |
{ | |
"cgX" : 0.4, | |
"cgY" : 0.5, | |
"scale" : 0.00019, | |
"rows": [ | |
{ | |
"set" : ["Gujarat", "Madhya Pradesh", "Chhattisgarh", "Jharkhand", "West Bengal"], | |
"position" : "absolute", | |
"width" : 0.65, | |
"offset" : 1, | |
"offsetY" : 1 | |
}, | |
{ | |
"set" : ["Rajasthan", "Uttar Pradesh", "Bihar"], | |
"position" : "above", | |
"width" : 0.65, | |
"offset" : 1.1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Haryana", "Delhi", "Uttaranchal"], | |
"position" : "above", | |
"width" : 0.25, | |
"offset" : 0.85, | |
"master" : "Rajasthan" | |
}, | |
{ | |
"set" : ["Punjab", "Himachal Pradesh"], | |
"position" : "above", | |
"width" : 0.20, | |
"offset" : 0.85, | |
"master" : "Haryana" | |
}, | |
{ | |
"set" : ["Jammu and Kashmir"], | |
"position" : "above", | |
"width" : 0.07, | |
"offset" : 0.85, | |
"master" : "Punjab" | |
}, | |
{ | |
"set" : ["Maharashtra", "Orissa"], | |
"position" : "below", | |
"width" : 0.5, | |
"offset" : 1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Karnataka", "Andhra Pradesh"], | |
"position" : "below", | |
"width" : 0.4, | |
"offset" : 1, | |
"master" : "Maharashtra" | |
}, | |
{ | |
"set" : ["Kerala", "Tamil Nadu"], | |
"position" : "below", | |
"width" : 0.3, | |
"offset" : 1, | |
"master" : "Karnataka" | |
} | |
], | |
"singles": [ | |
{ | |
"unit" : "Chandigarh", | |
"aspect" : 1, | |
"master" : "Punjab", | |
"direction": "west", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Puducherry", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Daman and Diu", | |
"aspect" : 1, | |
"master" : "Maharashtra", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Dadra and Nagar Haveli", | |
"aspect" : 1, | |
"master" : "Daman and Diu", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Andaman and Nicobar", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 200 | |
}, | |
{ | |
"unit" : "Lakshadweep", | |
"aspect" : 1, | |
"master" : "Kerala", | |
"direction": "west", | |
"position" : "middle", | |
"distance" : 100 | |
}, | |
{ | |
"unit" : "Goa", | |
"aspect" : 1, | |
"master" : "Karnataka", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Assam", | |
"aspect" : 2, | |
"master" : "Bihar", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Sikkim", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Arunachal Pradesh", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Manipur", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Nagaland", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Mizoram", | |
"aspect" : 1, | |
"master" : "Manipur", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Tripura", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Meghalaya", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
} | |
] | |
} |
{ | |
"cgX" : 0.4, | |
"cgY" : 0.48, | |
"scale" : 953, | |
"rows": [ | |
{ | |
"set" : ["Gujarat", "Madhya Pradesh", "Chhattisgarh", "Jharkhand", "West Bengal"], | |
"position" : "absolute", | |
"width" : 0.65, | |
"offset" : 1, | |
"offsetY" : 1 | |
}, | |
{ | |
"set" : ["Rajasthan", "Uttar Pradesh", "Bihar"], | |
"position" : "above", | |
"width" : 0.65, | |
"offset" : 1.1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Haryana", "Delhi", "Uttaranchal"], | |
"position" : "above", | |
"width" : 0.30, | |
"offset" : 0.85, | |
"master" : "Rajasthan" | |
}, | |
{ | |
"set" : ["Punjab", "Himachal Pradesh"], | |
"position" : "above", | |
"width" : 0.25, | |
"offset" : 0.85, | |
"master" : "Haryana" | |
}, | |
{ | |
"set" : ["Jammu and Kashmir"], | |
"position" : "above", | |
"width" : 0.15, | |
"offset" : 0.85, | |
"master" : "Punjab" | |
}, | |
{ | |
"set" : ["Maharashtra", "Orissa"], | |
"position" : "below", | |
"width" : 0.5, | |
"offset" : 1, | |
"master" : "Gujarat" | |
}, | |
{ | |
"set" : ["Karnataka", "Andhra Pradesh"], | |
"position" : "below", | |
"width" : 0.4, | |
"offset" : 1, | |
"master" : "Maharashtra" | |
}, | |
{ | |
"set" : ["Kerala", "Tamil Nadu"], | |
"position" : "below", | |
"width" : 0.3, | |
"offset" : 1, | |
"master" : "Karnataka" | |
} | |
], | |
"singles": [ | |
{ | |
"unit" : "Chandigarh", | |
"aspect" : 1, | |
"master" : "Punjab", | |
"direction": "west", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Puducherry", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Daman and Diu", | |
"aspect" : 1, | |
"master" : "Maharashtra", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Dadra and Nagar Haveli", | |
"aspect" : 1, | |
"master" : "Daman and Diu", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Andaman and Nicobar", | |
"aspect" : 1, | |
"master" : "Tamil Nadu", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 200 | |
}, | |
{ | |
"unit" : "Lakshadweep", | |
"aspect" : 1, | |
"master" : "Kerala", | |
"direction": "west", | |
"position" : "middle", | |
"distance" : 100 | |
}, | |
{ | |
"unit" : "Goa", | |
"aspect" : 1, | |
"master" : "Karnataka", | |
"direction": "west", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Assam", | |
"aspect" : 2, | |
"master" : "Bihar", | |
"direction": "east", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Sikkim", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Arunachal Pradesh", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "north", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Manipur", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Nagaland", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "east", | |
"position" : "start", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Mizoram", | |
"aspect" : 1, | |
"master" : "Manipur", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Tripura", | |
"aspect" : 1, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "end", | |
"distance" : 0 | |
}, | |
{ | |
"unit" : "Meghalaya", | |
"aspect" : 2, | |
"master" : "Assam", | |
"direction": "south", | |
"position" : "middle", | |
"distance" : 0 | |
} | |
] | |
} |