If my hometown in Montgomery, New York were to overlay my current location in Austin, Texas.
Experimenting with qGIS, ogr2ogr and TopoJSON.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.json("mystates.topo.json", function(error, map) { | |
var projection = d3.geo.albers().scale(2600).translate([width/2, 0]) | |
var path = d3.geo.path().projection(projection); | |
var colors = d3.scale.category20b(); | |
svg.append("g") | |
.attr("transform", "translate(0,-85)") | |
.attr("clip-path", "url(#texas)") | |
.selectAll('path') | |
.data(topojson.feature(map, map.objects.mystates).features) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.attr("id", function(d) { | |
return d.id; | |
}) | |
.attr("fill", function(d, idx) { | |
if ( d.id === "TX" ) return 'none'; | |
return colors(idx) | |
}) | |
.style("stroke", "#666") | |
.style("stroke-width", function(d) { | |
if ( d.id === "TX" ) return 1.5; | |
return 0.5; | |
}) | |
//apply mask | |
svg.append("defs") | |
.append("clipPath") | |
.attr("id", "texas") | |
.append("path") | |
.attr("d", function() { | |
return d3.select("#TX").attr("d"); | |
}); | |
var montgomery = { | |
lat: 41.523333, | |
lng: -74.236944, | |
id: "MON" | |
}; | |
var austin = { | |
lat: 30.25, | |
lng: -97.75, | |
id: "AUS" | |
}; | |
svg.select("g").selectAll("circle").data([montgomery,austin]) | |
.enter() | |
.append("circle") | |
.attr("id", function(d) { | |
return d.id; | |
}) | |
.attr("r", function(d) { | |
if ( d.id === "MON" ) return 3; | |
return 2000; | |
}) | |
.attr("fill", "none") | |
.style("stroke", "#fa0fa0") | |
.attr("cx", function(d) { | |
return projection([d.lng, d.lat])[0] | |
}) | |
.attr("cy", function(d) { | |
return projection([d.lng, d.lat])[1] | |
}).transition() | |
.delay(200) | |
.duration(2000) | |
.attr("r", 3) | |
//move other states in | |
svg.select("g").selectAll("path:not(#TX),circle:not(#AUS)") | |
.transition() | |
.delay(2000) | |
.duration(4000) | |
.attr("transform", "translate(-814,404)rotate(9)") | |
}); | |
</script> | |
</body> | |
</html> |