wboykinm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Thanks to Ben Balter For - in this case - showing how the Github CRUD API can be used to tap hosted topojson (or geojson) for cross-domain apps like this D3 implementation.

  
## 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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://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!
	<!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="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://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!