<!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>
choropleth using d3.js and GeoJSON files generated from TIGER data
{"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]]]}}]}
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,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