Github as a geodata server, take 4: Success with the CRUD API by wboykinm

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(3500)
    .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(["#E0AF2F", "#0B425C"]);
 
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.xhr("https://api.github.com/repos/wboykinm/geosprocket-geodata/contents/us.topojson", "application/vnd.github.v3.raw+json", function(error, data) {
  
  us = JSON.parse(data.response);

  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!