wknowles/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Mapping and ID-ing Philadelphia 2010 Census Tracts with D3 and TopoJSON
Data from Open Data Philly - Census Tracts.
Converted to topojson whilst preserving all fields.

  
## census_tracts.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              census_tracts.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>

path {
    fill: #aaa;
    stroke: #fff;
    stroke-width: .75px;
    pointer-events: all;
}

text {
  font-family: sans-serif;
  font-size: 75px;
  color: #aaa;
}

</style>
<body>

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

<script>

var width = 800,
    height = 700;

var projection = d3.geo.mercator()
    .center([-75.12, 40.05])
    .scale(100000);

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

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

var text = svg.append("text")
    .attr("y", height/8)
    .attr("text-anchor", "left");

d3.json("census_tracts.json", function(error, topology) {
    svg.selectAll("path")
        .data(topojson.object(topology, topology.objects.Census_Tracts_2010).geometries)
      .enter().append("path")
        .attr("class", "tracts")
  .attr("id", function(d){return d.properties.NAME10;})
  .attr("d", path)
  .on("mouseover", function(){d3.select(this).style("fill", "#ff0");
    text.text("tract: " + this.id);})
  .on("mouseout", function(){d3.select(this).style("fill", "#aaa");
    text.text("");});
});
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>

	path {
	fill: #aaa;
	stroke: #fff;
	stroke-width: .75px;
	pointer-events: all;
	}

	text {
	font-family: sans-serif;
	font-size: 75px;
	color: #aaa;
	}

	</style>
	<body>

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

	<script>

	var width = 800,
	height = 700;

	var projection = d3.geo.mercator()
	.center([-75.12, 40.05])
	.scale(100000);

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

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

	var text = svg.append("text")
	.attr("y", height/8)
	.attr("text-anchor", "left");

	d3.json("census_tracts.json", function(error, topology) {
	svg.selectAll("path")
	.data(topojson.object(topology, topology.objects.Census_Tracts_2010).geometries)
	.enter().append("path")
	.attr("class", "tracts")
	.attr("id", function(d){return d.properties.NAME10;})
	.attr("d", path)
	.on("mouseover", function(){d3.select(this).style("fill", "#ff0");
	text.text("tract: " + this.id);})
	.on("mouseout", function(){d3.select(this).style("fill", "#aaa");
	text.text("");});
	});
	</script>