block by jrrickard fb531d871c5203a216d0

Version two of the choropleth, with files run through mapshaper.

Full Screen

index.html

<!DOCTYPE html>
  <meta charset="utf-8">
  <style>
    .overlay {
      fill: none;
      pointer-events: all;
    }

    .border {
      fill: none;
      stroke: #000000;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .color0 { stroke: #000000; fill:#FFFAFA; }
    .color1 { stroke: #000000; fill:#F4C2C2; }
    .color3 { stroke: #000000; fill:#FF6961; }
    .color4 { stroke: #000000; fill:#FF5C5C; }
    .color5 { stroke: #000000; fill#FF1C00; }
    .color6 { stroke: #000000; fill:#FF0800; }
    .color7 { stroke: #000000; fill:#FF0000; }
    .color8 { stroke: #000000; fill:#CD5C5C; }
    .color9 { stroke: #000000; fill:#E34234; }
    .color10 { stroke: #000000; fill:#D73B3E; }
    .color11 { stroke: #000000; fill:#CE1620; }
    .color12 { stroke: #000000; fill:#CC0000; }
    .color13 { stroke: #000000; fill:#B22222; }
    .color14 { stroke: #000000; fill:#B31B1B; }
    .color15 { stroke: #000000; fill:#A40000; }
    .color16 { stroke: #000000; fill:#800000; }
    .color17 { stroke: #000000; fill:#701C1C; }
    .color18 { stroke: #000000; fill:#3C1414; }
    .color19 { stroke: #000000l fill:#321414; }
  </style>
  <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//d3js.org/queue.v1.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>
       $(document).ready(function() {
        var width = 960, height = 500;
        var percentageByCounty = d3.map();
        var featureIdToCounty = d3.map();
        var quantize = d3.scale.quantize()
                .domain([0, .874])
                .range(d3.range(20)
                .map(function(i) { return "color" + i; }));

         var quantize2 = d3.scale.quantize()
                .domain([0, .04])
                .range(d3.range(17)
                .map(function(i) { return "color" + i; }));

        var svg = d3.select("body").append("svg")
             .attr("width", width)
             .attr("height", height);

         queue()
             .defer(d3.json, "counties.json")
             .defer(d3.json, "colorado.json")
             .defer(d3.csv,
                    "countyToFeatureId.csv",
                    function(d) {
                        featureIdToCounty.set(d.featureId, d.county);
                    })
             .defer(d3.csv,
                    "county_to_percent.csv",
                     function(d) {
                          percentageByCounty.set(d.county, +d.percent);
                     })
             .await(ready);

          function ready(error, counties, states_colorado) {
             var projection = d3.geo.albersUsa()
                  .scale(6200)
                 .translate([width*1.20,height / 1.52]);
             svg.append("g")
                .selectAll("path")
                .data(counties.features)
                .enter()
                .append("path")
                .attr("class",function(d) {
                  var percentage = percentageByCounty.get(d.properties.NAME);
                  if (percentage === undefined) {
                        return "border";
                  } else {
                     if (percentage > .04) {
                        return quantize(percentage);
                     } else {
                        return quantize2(percentage);
                     }
                  }
                 })
                 .attr("d",d3.geo.path()
                 .projection(projection));

             svg.append("g")
                .selectAll("path")
                .data(states_colorado.features)
                .enter()
                .append("path").attr("class","border")
                .attr("d",d3.geo.path().projection(projection));
             }
       });

    </script>
 </script>

PPRR Winter Series Choropleth

choropleth using d3.js and GeoJSON files generated from TIGER data

colorado.json

{"bbox":[-109.060256,36.992424,-102.041626,41.003421],"type":"FeatureCollection","features":[{"type":"Feature","properties":{"REGION":"4","DIVISION":"8","STATEFP":"08","STATENS":"01779779","GEOID":"08","STUSPS":"CO","NAME":"Colorado","LSAD":"00","MTFCC":"G4000","FUNCSTAT":"A","ALAND":268432676592,"AWATER":1170523775,"INTPTLAT":"+38.9938673","INTPTLON":"-105.5083188"},"geometry":{"type":"Polygon","coordinates":[[[-109.050071,40.540437],[-109.048044,40.619241],[-109.049088,40.714503],[-109.048455,40.826081],[-109.050076,41.000659],[-108.884138,41.000094],[-108.631108,41.000156],[-108.526029,40.999592],[-108.500659,41.000112],[-108.375653,41.000013],[-108.250649,41.000114],[-108.181227,41.000455],[-108.046539,41.002064],[-107.866639,41.001932],[-107.750627,41.001971],[-107.50062,41.002349],[-107.367541,41.003073],[-107.241194,41.002804],[-107.003119,41.003421],[-106.857773,41.002663],[-106.751902,41.002702],[-106.625592,41.00211],[-106.439563,41.001978],[-106.386356,41.001144],[-106.314218,40.998923],[-106.218013,40.997737],[-106.061181,40.996999],[-106.000562,40.997251],[-105.726441,40.996836],[-105.625474,40.99715],[-105.341415,40.997972],[-105.248822,40.99844],[-105.155054,40.998247],[-104.855273,40.998048],[-104.838689,40.998857],[-104.625519,41.001428],[-104.487217,41.001693],[-104.355775,41.001493],[-104.173436,41.00177],[-103.971252,41.001533],[-103.796086,41.001765],[-103.669054,41.001442],[-103.486697,41.001914],[-103.365314,41.001846],[-103.143641,41.002312],[-102.981482,41.002112],[-102.827237,41.002143],[-102.556721,41.0022],[-102.360659,41.002428],[-102.2721,41.002245],[-102.051717,41.002359],[-102.051544,40.879955],[-102.051417,40.742793],[-102.051554,40.500023],[-102.051798,40.360069],[-102.051309,40.338381],[-102.051933,40.217428],[-102.05172,39.985153],[-102.051363,39.843471],[-102.050508,39.660936],[-102.049552,39.538895],[-102.049769,39.500298],[-102.049052,39.373991],[-102.047841,39.234582],[-102.047012,39.121247],[-102.046046,38.981776],[-102.045577,38.873296],[-102.04521,38.70452],[-102.044888,38.566394],[-102.045052,38.460822],[-102.044524,38.349174],[-102.044611,38.28591],[-102.044258,38.112946],[-102.044708,38.041257],[-102.044515,37.984575],[-102.043185,37.87502],[-102.042824,37.797113],[-102.041626,37.696699],[-102.041683,37.578556],[-102.04182,37.410149],[-102.041962,37.22191],[-102.042089,36.993016],[-102.208316,36.99373],[-102.375461,36.99458],[-102.57091,36.995134],[-102.698142,36.995149],[-102.752141,36.998341],[-102.815074,36.999774],[-102.875481,36.999628],[-102.986976,36.998524],[-103.013559,37.000212],[-103.123284,37.000293],[-103.252306,36.999572],[-103.499968,36.999185],[-103.701712,36.998202],[-103.817803,36.997339],[-104.000365,36.996218],[-104.215634,36.994754],[-104.338833,36.993535],[-104.614816,36.994129],[-104.644997,36.993379],[-104.875075,36.993298],[-105.000551,36.993262],[-105.029226,36.992727],[-105.1208,36.995428],[-105.222398,36.995166],[-105.250671,36.995645],[-105.419386,36.995857],[-105.66472,36.995874],[-105.899645,36.995551],[-105.969074,36.995569],[-106.125579,36.994859],[-106.201469,36.994122],[-106.343432,36.994237],[-106.498594,36.993705],[-106.591178,36.992923],[-106.661547,36.993196],[-106.75059,36.992461],[-106.869798,36.992424],[-106.877293,37.000141],[-107.10724,37.000008],[-107.256219,37.000003],[-107.508559,37.000004],[-107.649349,37.000003],[-107.842897,37.000002],[-108.03346,36.999748],[-108.249358,36.999015],[-108.250625,36.999555],[-108.500642,36.999276],[-108.682093,36.998969],[-108.875317,36.998839],[-109.045223,36.999084],[-109.045156,37.112064],[-109.045995,37.177279],[-109.04581,37.374993],[-109.043137,37.499992],[-109.04192,37.530525],[-109.041789,37.609655],[-109.042268,37.666128],[-109.041461,37.800105],[-109.041847,37.873247],[-109.041058,37.907236],[-109.042816,37.962359],[-109.042873,37.999302],[-109.041762,38.16469],[-109.054671,38.24508],[-109.060062,38.275489],[-109.060256,38.493254],[-109.060253,38.599328],[-109.059538,38.719986],[-109.057395,38.79529],[-109.054189,38.874984],[-109.052436,38.999985],[-109.051516,39.124982],[-109.050765,39.366677],[-109.051414,39.499973],[-109.051263,39.624974],[-109.050862,39.749969],[-109.050613,39.875055],[-109.050981,39.999968],[-109.051021,40.119884],[-109.05082,40.231093],[-109.050946,40.444368],[-109.050071,40.540437]]]}}]}

countyToFeatureId.csv

county,featureId
Adams,001
Jefferson,059
El Paso,041
Pitkin,097
Boulder,013
Arapahoe,005
Fremont,043
Douglas,035
Denver,031
Teller,119
Elbert,039
Larimer,069
Park,093
Pueblo,101

county_to_percent.csv

county,percent
Jefferson,0.003768843
El Paso,0.873115576
Pitkin,0.001256281
Boulder,0.003768843
Arapahoe,0.015075377
Fremont,0.003768844
Douglas,0.011306533
Adams,0.003768843
Denver,0.011306533
Teller,0.030150754
Elbert,0.003768844
Larimer,0.003768844
Park,0.001256281
Pueblo,0.030150754