D3 Examples - Variable selection choropleth

xxxxxxxxxx
 
<!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>
​
    <script src="d3.v3.min.js"></script>
    <script src="topojson.v1.min.js"></script>
    <script src="queue.v1.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
​
    <script>
        var width = 1250, height = 725;
​
        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>
​
    