darrenjaworski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A choropleth map of Oklahoma showing the hispanic population statewide. This is an updated vesion of work I published for Oklahoma Watch. It uses D3 and TOPOJSON to render the map from data collected by Katherine Borgerding and Juan Sanchez.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .county-border {
		fill: none;
		stroke: white;
		pointer-events: none;
	}
	.axis text {
		font: 10px sans-serif;
	}

	.axis line, .axis path {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
  	//choropleth
		var width = 800, height = 400;

		var color = d3.scale.linear().domain([1.9, 42]).range(["#FEE8C8", "#B30000"]);

		var projection = d3.geo.conicConformal().parallels([35 + 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-countiesHispanic.json", function(error, ok) {
			var counties = topojson.feature(ok, ok.objects.counties);

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

			var b = path.bounds(counties), 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(counties.features.filter(function(d) {
				return d.id;
			})).enter().append("path").attr("class", "county").attr("d", path).style("fill", function(d) {
				return color(d.properties.percent);
			}).append("title").text(function(d) {
				return d.properties.percent + "% of the population is hispanic. Estimated number of hispanic: " + d.properties.number;
			});

			svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
				return a !== b;
			})).attr("class", "county-border").attr("d", path);
		});
		//end choropleth

		//key
		var w = 140, h = 400;

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

		var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");

		legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

		legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

		key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");

		var y = d3.scale.linear().range([300, 0]).domain([1, 42]);

		var yAxis = d3.svg.axis().scale(y).orient("right");

		key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("% Hispanic");
		//end key

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

	</script>

## ok-countiesHispanic.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ok-countiesHispanic.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>
	.county-border {
	fill: none;
	stroke: white;
	pointer-events: none;
	}
	.axis text {
	font: 10px sans-serif;
	}

	.axis line, .axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	//choropleth
	var width = 800, height = 400;

	var color = d3.scale.linear().domain([1.9, 42]).range(["#FEE8C8", "#B30000"]);

	var projection = d3.geo.conicConformal().parallels([35 + 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-countiesHispanic.json", function(error, ok) {
	var counties = topojson.feature(ok, ok.objects.counties);

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

	var b = path.bounds(counties), 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(counties.features.filter(function(d) {
	return d.id;
	})).enter().append("path").attr("class", "county").attr("d", path).style("fill", function(d) {
	return color(d.properties.percent);
	}).append("title").text(function(d) {
	return d.properties.percent + "% of the population is hispanic. Estimated number of hispanic: " + d.properties.number;
	});

	svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
	return a !== b;
	})).attr("class", "county-border").attr("d", path);
	});
	//end choropleth

	//key
	var w = 140, h = 400;

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

	var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");

	legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

	legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

	key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");

	var y = d3.scale.linear().range([300, 0]).domain([1, 42]);

	var yAxis = d3.svg.axis().scale(y).orient("right");

	key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("% Hispanic");
	//end key

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

	</script>