Skip to content

Instantly share code, notes, and snippets.

@awkdev
Forked from mukhtyar/README.md
Last active August 29, 2015 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save awkdev/dc4f6bf788d74dd2ca8f to your computer and use it in GitHub Desktop.
Save awkdev/dc4f6bf788d74dd2ca8f to your computer and use it in GitHub Desktop.
<!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="#link to source">Name of source</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>
Display the source blob
Display the rendered blob
Raw
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

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