Skip to content

Instantly share code, notes, and snippets.

@karmadude

karmadude/README.md

Last active February 7, 2017 08:27
Show Gist options
  • Save karmadude/4526201 to your computer and use it in GitHub Desktop.
Save karmadude/4526201 to your computer and use it in GitHub Desktop.
Download ZIP
India Population 2011
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'>
<style>
body {
background: #faf5e2;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 12px;
}
header {
color: #7c6e63;
text-transform: uppercase;
width: 960px;
margin: 0 auto;
position: relative;
}
header h1 {
font-family: 'Jacques Francois Shadow', cursive;
font-size: 24px;
text-align: center;
margin-bottom: 0;
}
header h2 {
font-family: "HelveticaNeue-ThinCond", "Helvetica Neue Thin Cond", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 18px;
position: absolute;
top: -7px;
}
header h2.right {
right: 0;
}
.subunit {
fill: none;
stroke: #597a99;
stroke-width: .5;
}
.subunit.INX {
}
.subunit.INA {
}
.subunit.INN {
}
.subunit.INL {
}
.subunit.natural-earth {
fill: none;
}
.graticule {
fill: none;
stroke: #80B7D5;
stroke-width: .5px;
}
.frame1 {
width: 952px;
height: 608px;
margin: 0 auto;
border: 2px solid #6b5d50;
padding: 2px;
}
.frame2 {
border: 1px solid #a19e8d;
padding: 20px;
}
.map {
background: #a3bfd5;
}
.place {
fill: rgba(255,255,255,0.01);
stroke: #584f46;
}
#states {
fill: rgba(255,255,255,0.01);
stroke: #7D947C;
stroke-width: .5px;
}
.state.hover {
fill: rgba(255,255,255,0.50);
}
text {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
pointer-events: none;
}
.line {
fill: none;
stroke: #ddd;
}
.tooltip {
position: absolute;
background: rgba(200,200,200,0.75);
border: 1px solid #ddd;
padding: 5px 12px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(120,120,120,0.55);
text-shadow: 0 1px 0 #eee;
}
.state-title {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.state-population {
font-size: 18px;
}
</style>
<body>
<header>
<h1>India Population</h1>
<h2 class="left">1,210,193,422</h1>
<h2 class="right">Census 2011</h2>
</header>
<div class="frame1">
<div class="frame2">
<div class="map"></div>
</div>
</div>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 910,
height = 563;
var projection = d3.geo.mercator()
.center([83, 23.5])
.scale(890);
var path = d3.geo.path()
.projection(projection)
.pointRadius(2);
var tile = d3.geo.tile()
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
.zoomDelta((window.devicePixelRatio || 1) - .5);
var svg = d3.select(".map")
.append("svg")
.attr("width", width)
.attr("height", height);
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
tooltip.append("div")
.attr("class", "state-title");
tooltip.append("div")
.attr("class", "state-population");
var defs = svg.append("defs");
var ne = svg.append("g")
.attr("id", "natural-earth");
var india = svg.append("g")
.attr("id", "india");
var indiaPlaces = svg.append("g")
.attr("id", "places");
var states = svg.append("g")
.attr("id", "states");
var pop;
var format1000 = d3.format(',');
d3.json("/d/4527959/in-map-major-cities.json", function(error, data) {
drawNaturalEarth();
drawIndia(data);
drawIndiaPlaces(data);
drawStates(function() {
});
});
function drawIndia(data) {
var subunits = topojson.object(data, data.objects.subunits);
india.selectAll("path.subpath")
.data(subunits.geometries)
.enter().append("path")
.attr('class', function(d) { return 'subunit ' + d.id; })
.attr('id', function(d) { return d.id; })
.attr("d", path);
}
function drawIndiaPlaces(data) {
indiaPlaces.selectAll("path.place")
.data(topojson.object(data, data.objects.places).geometries)
.enter().append("path")
.attr("d", path)
.attr("class", "place")
.on("mouseenter", function(d) {
tooltip.transition()
.duration(100)
.style("opacity", 1);
tooltip.select('.state-title')
.text(d.properties.name);
tooltip.select('.state-population')
.text('');
})
.on("mousemove", function(d) {
tooltip.style("left", (d3.event.pageX+5) + "px")
.style("top", (d3.event.pageY+5) + "px");
})
.on("mouseleave", function(d) {
tooltip.transition()
.duration(100)
.style("opacity", 0);
});
}
// Code from D3 United States Example at http://bl.ocks.org/4150951
function drawNaturalEarth() {
var tiles = tile();
india.selectAll('.subunit')
.classed('natural-earth', true);
var clips = defs.append("clipPath")
.attr("id", "clip");
clips.append("use")
.attr("xlink:href", "#INX");
clips.append("use")
.attr("xlink:href", "#INA");
clips.append("use")
.attr("xlink:href", "#INN");
clips.append("use")
.attr("xlink:href", "#INL");
ne.attr("clip-path", "url(#clip)")
.selectAll("image")
.data(tiles)
.enter().append("image")
.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
.attr("width", Math.round(tiles.scale))
.attr("height", Math.round(tiles.scale))
.attr("x", function(d) { return Math.round((d[0] + tiles.translate[0]) * tiles.scale); })
.attr("y", function(d) { return Math.round((d[1] + tiles.translate[1]) * tiles.scale); });
}
function drawStates(callback) {
d3.json("/d/4527959/in-states-topo.json", function(data) {
states.selectAll("path")
.data(topojson.object(data, data.objects.states).geometries)
.enter().append("path")
.attr('class', "state")
.attr("title", function(d) { return d.properties.name; })
.attr("d", path)
.on("mouseenter", function(d) {
d3.select(this).classed('hover', true);
tooltip.transition()
.duration(100)
.style("opacity", 1);
if (pop[d.id]) {
tooltip.select('.state-title')
.text(d.properties.name);
tooltip.select('.state-population')
.text(format1000(pop[d.id]));
}
})
.on("mousemove", function(d) {
tooltip.style("left", (d3.event.pageX+5) + "px")
.style("top", (d3.event.pageY+5) + "px");
})
.on("mouseleave", function(d) {
d3.select(this).classed('hover', false);
tooltip.transition()
.duration(100)
.style("opacity", 0);
});
drawPopulation(callback);
});
}
function drawPopulation(callback) {
d3.json("/d/4527959/in-population.json", function(population) {
pop = population.states;
callback();
});
}
d3.select(self.frameElement.parentElement).style('background', '#faf5e2');
d3.select(self.frameElement)
.style("height", "664px")
.style("border", "none");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment