darrenjaworski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    There is a bug in the color change. I don't know why. The entire thing gives me console errors. If anyone knows how to fix please tell me.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
	svg {
		font: 10px sans-serif;
	}

	.caption {
		font-weight: bold;
	}

	.key path {
		display: none;
	}

	.key line {
		stroke: #000;
		shape-rendering: crispEdges;
	}

	.county {
		fill: #eee;
	}

	.county-border {
		fill: none;
		stroke: #fff;
	}

	.state-border {
		fill: none;
		stroke: #333;
	}

</style>
<body>
<body>
	<input type="range" min="1987" max="2010" value="1987" step="1" onchange="showValue(this.value)" />

	<span id="range">1987</span>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script type="text/javascript">
		function showValue(newValue) {
			document.getElementById("range").innerHTML = newValue;
		}
	</script>
	<script>
		var width = 960, height = 600;

		var color = d3.scale.threshold().domain([7, 12, 20, 25]).range(["#ffffcc", "#c2e699", "#78c679", "#31a354", "#006837"]);

		// A position encoding for the key only.
		var x = d3.scale.linear().domain([7, 25]).range([0, 300]);

		var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(15).tickValues(color.domain());

		//adjusted for OK state plane
		var projection = d3.geo.conicConformal().rotate([35 + 34 / 60, 90 + 46 / 60]).rotate([98 + 00 / 60, -35 + 00 / 60]).scale(6500)

		.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);

		var g = svg.append("g").attr("class", "key").attr("transform", "translate(20,20)");

		g.selectAll("rect").data(color.range().map(function(d, i) {
			return {
				x0 : i ? x(color.domain()[i - 1]) : x.range()[0],
				x1 : i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
				z : d
			};
		})).enter().append("rect").attr("height", 8).attr("x", function(d) {
			return d.x0;
		}).attr("width", function(d) {
			return d.x1 - d.x0;
		}).style("fill", function(d) {
			return d.z;
		});

		g.call(xAxis).append("text").attr("class", "caption").attr("y", -6);
		//.text("Population per square mile");

		d3.json("ok-countiesStudentRatio.json", function(error, ok) {
			var counties = topojson.object(ok, ok.objects.counties);

			svg.append("g").attr("class", "county").selectAll("path").data(counties.geometries).enter().append("path").attr("d", path).style("fill", function(d) {
				return color(d.properties.eightyseven);
			}).append("title").text(function(d) {
				return d.properties.county;
			});

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

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

			d3.selectAll("input").on("change", function change() {
				var value = this.value;

				d3.selectAll("path").style("fill", function(d) {
					switch (value) {
						case "1987":
							return color(d.properties.eightyseven);
							break;
						case "1988":
							return color(d.properties.eightyeight);
							break;
						case "1989":
							return color(d.properties.eightynine);
							break;
						case "1990":
							return color(d.properties.ninety);
							break;
						case "1991":
							return color(d.properties.ninetyone);
							break;
						case "1992":
							return color(d.properties.ninetytwo);
							break;
						case "1993":
							return color(d.properties.ninetythree);
							break;
						case "1994":
							return color(d.properties.ninetyfour);
							break;
						case "1995":
							return color(d.properties.ninetyfive);
							break;
						case "1996":
							return color(d.properties.ninetysix);
							break;
						case "1997":
							return color(d.properties.ninetyseven);
							break;
						case "1998":
							return color(d.properties.ninetyeight);
							break;
						case "1999":
							return color(d.properties.ninetynine);
							break;
						case "2000":
							return color(d.properties.aught);
							break;
						case "2001":
							return color(d.properties.one);
							break;
						case "2002":
							return color(d.properties.two);
							break;
						case "2003":
							return color(d.properties.three);
							break;
						case "2004":
							return color(d.properties.four);
							break;
						case "2005":
							return color(d.properties.five);
							break;
						case "2006":
							return color(d.properties.six);
							break;
						case "2007":
							return color(d.properties.seven);
							break;
						case "2008":
							return color(d.properties.eight);
							break;
						case "2009":
							return color(d.properties.nine);
							break;
						case "2010":
							return color(d.properties.ten);
							break;
					}
				});
			});

		});

	</script>

## ok-countiesStudentRatio.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ok-countiesStudentRatio.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>
	svg {
	font: 10px sans-serif;
	}

	.caption {
	font-weight: bold;
	}

	.key path {
	display: none;
	}

	.key line {
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.county {
	fill: #eee;
	}

	.county-border {
	fill: none;
	stroke: #fff;
	}

	.state-border {
	fill: none;
	stroke: #333;
	}

	</style>
	<body>
	<body>
	<input type="range" min="1987" max="2010" value="1987" step="1" onchange="showValue(this.value)" />

	<span id="range">1987</span>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script type="text/javascript">
	function showValue(newValue) {
	document.getElementById("range").innerHTML = newValue;
	}
	</script>
	<script>
	var width = 960, height = 600;

	var color = d3.scale.threshold().domain([7, 12, 20, 25]).range(["#ffffcc", "#c2e699", "#78c679", "#31a354", "#006837"]);

	// A position encoding for the key only.
	var x = d3.scale.linear().domain([7, 25]).range([0, 300]);

	var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(15).tickValues(color.domain());

	//adjusted for OK state plane
	var projection = d3.geo.conicConformal().rotate([35 + 34 / 60, 90 + 46 / 60]).rotate([98 + 00 / 60, -35 + 00 / 60]).scale(6500)

	.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);

	var g = svg.append("g").attr("class", "key").attr("transform", "translate(20,20)");

	g.selectAll("rect").data(color.range().map(function(d, i) {
	return {
	x0 : i ? x(color.domain()[i - 1]) : x.range()[0],
	x1 : i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
	z : d
	};
	})).enter().append("rect").attr("height", 8).attr("x", function(d) {
	return d.x0;
	}).attr("width", function(d) {
	return d.x1 - d.x0;
	}).style("fill", function(d) {
	return d.z;
	});

	g.call(xAxis).append("text").attr("class", "caption").attr("y", -6);
	//.text("Population per square mile");

	d3.json("ok-countiesStudentRatio.json", function(error, ok) {
	var counties = topojson.object(ok, ok.objects.counties);

	svg.append("g").attr("class", "county").selectAll("path").data(counties.geometries).enter().append("path").attr("d", path).style("fill", function(d) {
	return color(d.properties.eightyseven);
	}).append("title").text(function(d) {
	return d.properties.county;
	});

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

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

	d3.selectAll("input").on("change", function change() {
	var value = this.value;

	d3.selectAll("path").style("fill", function(d) {
	switch (value) {
	case "1987":
	return color(d.properties.eightyseven);
	break;
	case "1988":
	return color(d.properties.eightyeight);
	break;
	case "1989":
	return color(d.properties.eightynine);
	break;
	case "1990":
	return color(d.properties.ninety);
	break;
	case "1991":
	return color(d.properties.ninetyone);
	break;
	case "1992":
	return color(d.properties.ninetytwo);
	break;
	case "1993":
	return color(d.properties.ninetythree);
	break;
	case "1994":
	return color(d.properties.ninetyfour);
	break;
	case "1995":
	return color(d.properties.ninetyfive);
	break;
	case "1996":
	return color(d.properties.ninetysix);
	break;
	case "1997":
	return color(d.properties.ninetyseven);
	break;
	case "1998":
	return color(d.properties.ninetyeight);
	break;
	case "1999":
	return color(d.properties.ninetynine);
	break;
	case "2000":
	return color(d.properties.aught);
	break;
	case "2001":
	return color(d.properties.one);
	break;
	case "2002":
	return color(d.properties.two);
	break;
	case "2003":
	return color(d.properties.three);
	break;
	case "2004":
	return color(d.properties.four);
	break;
	case "2005":
	return color(d.properties.five);
	break;
	case "2006":
	return color(d.properties.six);
	break;
	case "2007":
	return color(d.properties.seven);
	break;
	case "2008":
	return color(d.properties.eight);
	break;
	case "2009":
	return color(d.properties.nine);
	break;
	case "2010":
	return color(d.properties.ten);
	break;
	}
	});
	});

	});

	</script>