D3 Examples - Slider bug with choropleth threshold

xxxxxxxxxx
 
<!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="https://d3js.org/topojson.v0.min.js"></script>
        <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://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>
​
    