block by wboykinm 6056893

Github as a geodata server, take 2.

Full Screen

Thanks to Ben Balter and others for pointing out that raw geodata (topojson in this case) can be served from github without cross-domain failure the same way that everything else can be served: under the gh-pages umbrella.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.graticule {
  fill: none;
  stroke: #999;
}
 
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
 
.counties :hover {
  fill: yellow !important;
}
 
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v0.min.js"></script>
<script>
 
var width = 1200,
    height = 800;
    
var projection = d3.geo.satellite()
    .distance(1.1)
    .scale(4500)
    .rotate([82.00, -34.50, 32.12])
    .center([-2, 5])
    .tilt(30)
    .clipAngle(25);
 
var graticule = d3.geo.graticule()
    .extent([[-113, 27], [-47 + 1e-6, 57 + 1e-6]])
    .step([3, 3]);
 
var fill = d3.scale.log()
    .domain([10, 500])
    .range(["brown", "steelblue"]);
 
var path = d3.geo.path().projection(projection);
 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
 
d3.json("//wboykinm.github.io/geosprocket-geodata/us.topojson", function(error, us) {
  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
      .data(topojson.object(us, us.objects.counties).geometries)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return fill(path.area(d)); });
 
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
});
 
</script>
July 2013 | Thanks, Mike!