|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
body { |
|
font-family: "Helvetica Neue", sans-serif; |
|
margin: 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> |
|
<script> |
|
var width = window.innerWidth, height = window.innerHeight; |
|
|
|
var projection = d3.geoOrthographic() |
|
.scale(width / 2) |
|
.translate([width / 2, height / 2]) |
|
.precision(1); |
|
|
|
var path = d3.geoPath() |
|
.projection(projection); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var g = svg.append("g"); |
|
|
|
drawGraticule(); |
|
spinEarth(); |
|
|
|
d3.json("india.json", function(error, data){ |
|
|
|
var subunits = drawSubUnits(data); |
|
colorSubunits(subunits); |
|
drawSubUnitLabels(data); |
|
drawOuterBoundary(data); |
|
|
|
}); |
|
|
|
function colorSubunits(subunits) { |
|
|
|
var c = d3.scaleOrdinal(d3.schemeCategory20); |
|
subunits |
|
.style("fill", function(d,i){ return c(i); }) |
|
.style("opacity", ".6"); |
|
|
|
} |
|
|
|
function drawGraticule(){ |
|
|
|
var graticule = d3.geoGraticule() |
|
.step([10, 10]); |
|
|
|
g.append("path") |
|
.datum(graticule) |
|
.attr("class", "graticule") |
|
.attr("d", path) |
|
.style("fill", "none") |
|
.style("stroke", "#ccc"); |
|
|
|
} |
|
|
|
function drawOuterBoundary(data, boundary){ |
|
|
|
g.append("path") |
|
.datum(topojson.mesh(data, data.objects.polygons, function(a, b) { return a === b; })) |
|
.attr("d", path) |
|
.attr("class", "subunit-boundary") |
|
.attr("fill", "none") |
|
.attr("stroke", "#3a403d"); |
|
|
|
} |
|
|
|
function drawSubUnits(data){ |
|
|
|
var subunits = g.selectAll(".subunit") |
|
.data(topojson.feature(data, data.objects.polygons).features) |
|
.enter().append("path") |
|
.attr("class", "subunit") |
|
.attr("d", path) |
|
.style("stroke", "#fff") |
|
.style("stroke-width", "1px"); |
|
|
|
return subunits; |
|
|
|
} |
|
|
|
function drawSubUnitLabels(data){ |
|
|
|
g.selectAll(".subunit-label") |
|
.data(topojson.feature(data, data.objects.polygons).features) |
|
.enter().append("text") |
|
.attr("class", "subunit-label") |
|
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) |
|
.attr("dy", ".35em") |
|
.attr("text-anchor", "middle") |
|
.style("font-size", ".5em") |
|
.style("text-shadow", "0px 0px 2px #fff") |
|
.style("text-transform", "uppercase") |
|
.text(function(d) { return d.properties.st_nm; }); |
|
|
|
} |
|
|
|
function spinEarth(){ |
|
|
|
d3.timer(function(elapsed) { |
|
projection.rotate([.01 * elapsed - 120, -30, 0]); |
|
g.selectAll("path").attr("d", path); |
|
g.selectAll("text").attr("transform", function(d) { return isNaN(path.centroid(d)[0]) ? "translate(-100, -100)" : "translate(" + path.centroid(d) + ")"; }); |
|
}); |
|
|
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |
@HarryStevens Very cool! I'm curious, where did the India state shapes come from?