Skip to content

Instantly share code, notes, and snippets.

@mukhtyar
Last active Mar 30, 2020
Embed
What would you like to do?
Map of India's Parliamentary Constitiencies, 2014
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.pc {
fill: #bdbdbd;
stroke: #fff;
stroke-width: 0.5px;
}
.state {
fill: none;
stroke: #636363;
stroke-width: 1px;
stroke-linejoin: round;
}
#container {
margin:2%;
padding:20px;
border:2px solid #d0d0d0;
border-radius: 5px;
}
div.tooltip {
position: absolute;
text-align: center;
padding: 0.5em;
font-size: 10px;
color: #222;
background: #FFF;
border-radius: 2px;
pointer-events: none;
box-shadow: 0px 0px 2px 0px #a6a6a6;
text-shadow:#f5f5f5 0 1px 0;
}
.legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight: bold;
font-size: 90%;
}
.legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.legend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
}
.legend ul.legend-labels li span {
display: block;
float: left;
height: 20px;
width: 20px;
margin-right: 5px;
margin-left: 0;
}
.legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
</style>
</head>
<body onload="sizeChange()">
<div id="container">
<h1>Parliamentary Constituencies, 2014</h1>
<div class='legend'>
<div class='legend-title'>Reservation Status</div>
<div class='legend-scale'>
</div>
<div class='legend-source'>Source: <a href="http://projects.datameet.org/maps/">Data{Meet}</a></div>
</div>
</div>
<script type="text/javascript">
d3.select(window).on("resize", sizeChange);
//Set d3 scale
var color_domain = ['GEN','SC','ST'];
var legend_labels = ['GEN','SC','ST'];
var color = d3.scale.threshold()
.domain(color_domain)
.range(["", "#b2df8a", "#1f78b4","#a6cee3"]);
//Set tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Set d3 projection, path and svg
var projection = d3.geo.mercator()
.center([78, 27])
.scale(1200);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#container")
.append("svg")
.attr("width", "100%")
.attr("height","100%")
.append("g");
//Wait for data files to download before drawing
queue()
.defer(d3.json, "india_pc_2014_simplified.topojson")
.defer(d3.json, "india_state_2014_simplified.topojson")
.defer(d3.csv, "results.csv") //sample data
.await(ready);
function ready(error, pc, state, data) {
//Set up for visualizing sample data
var pairResultWithId = {};
var pairNameWithId = {};
data.forEach(function(d) {
pairResultWithId[d.ST_CODE + d.PC_CODE] = d.Res;
pairNameWithId[d.ST_CODE + d.PC_CODE] = d.PC_NAME;
});
//Drawing pc boundaries
var pc_geojson = topojson.feature(pc, pc.objects.india_pc_2014);
svg.selectAll(".pc")
.data(pc_geojson.features)
.enter().append("path")
.attr("class", "pc")
.attr("d", path)
.style ( "fill" , function (d) {
var result = pairResultWithId[d.properties.ST_CODE + d.properties.PC_CODE];
if (result!='') {return color(result);}
})
.style("opacity", 0.8)
.on("mouseover", function(d) {
d3.select(this).transition().duration(300).style("opacity", 1);
div.transition().duration(300)
.style("opacity", 1)
div.text(pairNameWithId[d.properties.ST_CODE + d.properties.PC_CODE] + " : " + pairResultWithId[d.properties.ST_CODE + d.properties.PC_CODE])
.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);
})
;
//Drawing state boundaries
var state_geojson = topojson.feature(state, state.objects.india_state_2014);
svg.selectAll(".state")
.data(state_geojson.features)
.enter().append("path")
.attr("class", "state")
.attr("d", path);
}
//Set up for drawing html legend elements
var legend = d3.select('.legend-scale')
.append('ul')
.attr('class', 'legend-labels');
var keys = legend.selectAll('li')
.data(color_domain);
keys.enter().append('li')
.text(function(d, i){ return legend_labels[i];})
.append('span')
.style('background', function(d) { return color(d); })
;
//Function called when window is resized
function sizeChange() {
d3.select("g").attr("transform", "scale(" + $("#container").width()/1000 + ")");
$("svg").height($("#container").width()*0.75);
}
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@prakash741

This comment has been minimized.

Copy link

@prakash741 prakash741 commented May 23, 2016

jellyfish

@viranch

This comment has been minimized.

Copy link

@viranch viranch commented Mar 3, 2017

Hi @mukhtyar, would you also mind improving the world map in https://github.com/markmarkoh/datamaps/ with "legal" India boundaries? I think the world topojson file is https://github.com/markmarkoh/datamaps/blob/master/src/js/data/world.topo.json. Any help will be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment