darrenjaworski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A deeper exploration of TOPOJSON projections. (see previous) Now with census tract shapefiles taken from the Census Bureau.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
	<style>
		.schooldistrict {
			fill: #bbb;
			stroke: #777;
		}

		.schooldistrict:hover {
			fill: blue;
		}

		.schooldistrict-border {
			fill: none;
			pointer-events: none;
		}

	</style>
	<title>Oklahoma Census Tracts</title>
	<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>
	var width = 800, height = 400;

	var projection = d3.geo.conicConformal()
		.parallels([37 + 34 / 60, 90 + 46 / 60])
		.rotate([98 + 00 / 60, -35 + 00 / 60])
		.translate([width / 2, height / 2]);

	var path = d3.geo.path()
		.projection(projection);

	var svg = d3.select("body")
		.append("svg")
		.attr("width", width)
		.attr("height", height);

	d3.json("ok-censustract.json", function(error, ok)
	{
		var tract = topojson
			.feature(ok, ok.objects.tract);

		projection.scale(1).translate([0, 0]);

		var b = path.bounds(tract), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

		projection.scale(s).translate(t);

		svg.selectAll("path")
		.data(tract.features.filter(
			function(d)
				{
					return d.type;
				}))
				.enter()
				.append("path")
				.attr("class", "schooldistrict")
				.attr("d", path)
				.append("title")
				.text(function(d)
				{
					return d.type;
				});

		svg.append("path")
			.datum(topojson.mesh(ok, ok.objects.tract, function(a, b)
			{
				return a !== b;
			}))
			.attr("class", "schooldistrict-border")
			.attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

</script>

## ok-censustract.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ok-censustract.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.schooldistrict {
	fill: #bbb;
	stroke: #777;
	}

	.schooldistrict:hover {
	fill: blue;
	}

	.schooldistrict-border {
	fill: none;
	pointer-events: none;
	}

	</style>
	<title>Oklahoma Census Tracts</title>
	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<script>
	var width = 800, height = 400;

	var projection = d3.geo.conicConformal()
	.parallels([37 + 34 / 60, 90 + 46 / 60])
	.rotate([98 + 00 / 60, -35 + 00 / 60])
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.json("ok-censustract.json", function(error, ok)
	{
	var tract = topojson
	.feature(ok, ok.objects.tract);

	projection.scale(1).translate([0, 0]);

	var b = path.bounds(tract), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

	projection.scale(s).translate(t);

	svg.selectAll("path")
	.data(tract.features.filter(
	function(d)
	{
	return d.type;
	}))
	.enter()
	.append("path")
	.attr("class", "schooldistrict")
	.attr("d", path)
	.append("title")
	.text(function(d)
	{
	return d.type;
	});

	svg.append("path")
	.datum(topojson.mesh(ok, ok.objects.tract, function(a, b)
	{
	return a !== b;
	}))
	.attr("class", "schooldistrict-border")
	.attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>