Variable selection choropleth - OK food deserts

Choropleth representations of 15 quantized scale variables. Click a radio dial button to change the color variable. The data is related to the concept of a food desert. For more information on food deserts, please visit their Food Access Research Atlas.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.county-border {
		fill: none;
		stroke: #919599;
	}
			
	.state-border {
		fill: none;
		stroke: #919599;
	}
	
	.q0-9 { fill:rgb(247,251,255); }
	.q1-9 { fill:rgb(222,235,247); }
	.q2-9 { fill:rgb(198,219,239); }
	.q3-9 { fill:rgb(158,202,225); }
	.q4-9 { fill:rgb(107,174,214); }
	.q5-9 { fill:rgb(66,146,198); }
	.q6-9 { fill:rgb(33,113,181); }
	.q7-9 { fill:rgb(8,81,156); }
	.q8-9 { fill:rgb(8,48,107); }

#factors{
		position: absolute;
		top:220px;
		left: 50px;
	}

</style>
<title>Oklahoma food deserts</title>
<body>
	
	<form id="factors">
		<h3>Vehical Access</h3>
		<input type="radio" name="factor" value="lahunv1share" checked>1 mile
		<input type="radio" name="factor" value="lahunv10share">10 mile
		<input type="radio" name="factor" value="lahunv20share">20 mile
		<h3>Low Access Population</h3>
		<input type="radio" name="factor" value="lapop1share">1 mile
		<input type="radio" name="factor" value="lapop10share">10 mile
		<input type="radio" name="factor" value="lapop20share">20 mile
		<h3>Low Access Child</h3>
		<input type="radio" name="factor" value="lakids1share">1 mile
		<input type="radio" name="factor" value="lakids10share">10 mile
		<input type="radio" name="factor" value="lakids20share">20 mile
		<h3>Low Access, Low Income</h3>
		<input type="radio" name="factor" value="lalowi1share">1 mile
		<input type="radio" name="factor" value="lalowi10share">10 mile
		<input type="radio" name="factor" value="lalowi20share">20 mile
		<h3>Low Access Senior</h3>
		<input type="radio" name="factor" value="laseniors1share">1 mile
		<input type="radio" name="factor" value="laseniors10share">10 mile
		<input type="radio" name="factor" value="laseniors20share">20 mile
	</form>

var formatNumber = d3.format(",d");
		
		var quantize = d3.scale.quantize()
    			.domain([0, 1])
    			.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
    		
    		var projection = d3.geo.conicConformal()
			.parallels([35 + 34 / 60, 36 + 46 / 60])
			.rotate([98 + 00 / 60, -35 - 00 / 60])
			.scale(7000)
			.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);
		
		queue()
			.defer(d3.json, "/darrenjaworski/raw/5968421/ok-counties2.json")
			.defer(d3.json, "ok-tractfood.json")
			.await(ready);

function ready(error, ok, tract) {

//tracts
			svg.append("g")
				.attr("class", "tract")
				.selectAll("path")
				.data(topojson.feature(tract, tract.objects.tract).features)
				.enter().append("path")
				.attr("class", function(d){ return quantize(d.properties.lahunv1share);})
				.attr("d", path);
				
			//counties
			svg.append("path")
				.attr("class", "county-border")
				.datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { return a !== b;}))
				.attr("d", path);
				
			//state border
			svg.append("path")
				.attr("class", "state-border")
				.datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {return a === b;})).attr("d", path);
			
			//select radio inputs
			d3.selectAll("input")
				.on("change", change)
			
			//value changes based upon selection
			function change() {
   				var value = this.value;
   				
   				d3.selectAll("path")
   					.attr("class", function(d){return quantize(d.properties[value]);});	
  				}	
			}

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js