Skip to content

Instantly share code, notes, and snippets.

@markmarkoh markmarkoh/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
Texas vs the North East

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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.