D3 Examples - A D3 county choropleth map of Kentucky oil or gas wells

xxxxxxxxxx
 
<html>
<head>
    <meta charset="utf-8">
    <title>A D3 county choropleth map of Kentucky oil or gas wells</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="simple_statistics.js"></script>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<style>
    body {
        padding: 0;
        margin: 0;
        background: whitesmoke;
    }
    h1 {
        position: absolute;
        left: 20px;
        top: 10px;
        font-family: "Proxima Nova", Montserrat, sans-serif;
        font-size: 2em;
        font-weight: 100;
        color: #005DAA; /* offical UK Kentucky blue */
    }
    .county {
      stroke: #fff;
    } 
</style>
</head>
<body>
    <h1>Kentucky Counties Oil (or Gas) Wells by County</h1>
  <script>
        
    var width = 900,
        height = 600;
    
    var svg = d3.select( "body" )
          .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
      
    var projection = d3.geo.albers()
        .center([0, 37.8])
        .rotate([85.8,0])
        .scale(8000)
        .translate([width / 2, height / 2]);
​
    var geoPath = d3.geo.path()
        .projection(projection);
    
    queue()
        .defer(d3.json, "ky-counties.json")
        .await(ready);
      
    function ready(error, counties){
        
        var attribute = "gas_wells"; // alternative is "oil_wells"
​
        var breaks = ss.jenks(counties.objects.counties.geometries.map(function(d) { 
            return d.properties[attribute]/d.properties.ALAND; 
        }), 5);
        
        breaks.shift(); // remove min value from breaks Array before applying to domain
        breaks.pop(); // same for max
        
        var colors = ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
​
        var jenks = d3.scale.threshold()
            .domain(breaks)
            .range(colors);
        
        svg.append("g")
            .selectAll("path")
            .data( topojson.feature(counties, counties.objects.counties).features)
            .enter()
            .append("path")
            .attr( "d", geoPath )
            .attr("class","county")
            .attr( "fill", function(d){
                return jenks(d.properties[attribute]/d.properties.ALAND);  
            }); 
    }
​
  </script>
</body>
</html>
    