Skip to content

Instantly share code, notes, and snippets.

@mattparrilla

mattparrilla/index.html

Last active February 14, 2017 04:23
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattparrilla/5724610 to your computer and use it in GitHub Desktop.
Save mattparrilla/5724610 to your computer and use it in GitHub Desktop.
Download ZIP
Vermont Population Choropleth
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
display: inline;
}
.key path {
display: none;
}
.key line {
stroke: #000;
shape-rendering: crispEdges;
}
.key text {
font-size: 10px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
// Set window height + width
var width = 500,
height = 650;
// Define map projection
var projection = d3.geo.transverseMercator()
.rotate([72.57, -44.20])
.translate([175,185])
.scale([12000]);
// Define path generator
var path = d3.geo.path()
.projection(projection);
// Create SVG Element
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Define scale to sort data values into color buckets
var color = d3.scale.threshold()
.domain([10, 200, 1000, 2000, 5000, 10000, 20000, 40000, 50000])
.range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);
// Legend Stuff
var y = d3.scale.sqrt()
.domain([0, 50000])
.range([0,325]);
var yAxis = d3.svg.axis()
.scale(y)
.tickValues(color.domain())
.orient("right");
// Load CSV
d3.csv("vt_pop.csv", function(data) {
// Load TopoJSON
d3.json("vermont.json", function(error, vt) {
for (var i = 0; i < data.length; i++) {
var dataTown = data[i].town;
var dataPop = parseFloat(data[i].population);
for (var j = 0; j < vt.objects.vt_towns.geometries.length; j++) {
var jsonTown = vt.objects.vt_towns.geometries[j].properties.town;
if (dataTown.toUpperCase() == jsonTown) {
vt.objects.vt_towns.geometries[j].properties.population = dataPop;
break;
}
}
}
var vermont = topojson.feature(vt, vt.objects.vt_towns);
svg.append("path")
.datum(vermont)
.attr("d", path)
.style("stroke", "#777")
.style("stroke-width", "1");
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(320, 165)")
.call(yAxis);
g.selectAll("rect")
.data(color.range().map(function(d, i) {
return {
y0: i ? y(color.domain()[i - 1]) : y.range()[0],
y1: i < color.domain().length ? y(color.domain()[i]) : y.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("width", 8)
.attr("y", function(d) { return d.y0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.style("fill", function(d) { return d.z; });
svg.selectAll(".subunit")
.data(topojson.feature(vt, vt.objects.vt_towns).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) {
var population = d.properties.population;
if (population) {
return color(population);
} else {
return "#ddd";
}
})
.on("mouseover", function(d) {
var xPosition = d3.mouse(this)[0];
var yPosition = d3.mouse(this)[1] - 30;
svg.append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text(d.properties.town);
d3.select(this)
.style("fill", "#509e2f");
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
d3.select(this)
.transition()
.duration(250)
.style("fill", function(d) {
var population = d.properties.population;
if (population) {
return color(population);
} else {
return "#ddd";
}
});
});
svg.append("path")
.datum(topojson.feature(vt, vt.objects.lake))
.attr("d", path)
.style("stroke", "#89b6ef")
.style("stroke-width", "1px")
.style("fill", "#b6d2f5");
});
});
</script>
Display the source blob
Display the rendered blob
Raw
vermont.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
vt_pop.csv
town population
Addison 1357
Albany 932
Alburgh 2004
Andover 471
Arlington 2297
Athens 438
Averill 24
Avery's Gore 0
Bakersfield 1342
Baltimore 247
Barnard 939
Barnet 1696
Barre 16900
Barton 2753
Belvidere 354
Bennington 15555
Benson 1049
Berkshire 1710
Berlin 2871
Bethel 2020
Bloomfield 219
Bolton 1188
Bradford 2782
Braintree 1236
Brandon 3919
Brattleboro 11848
Bridgewater 933
Bridport 1215
Brighton 1204
Bristol 3875
Brookfield 1295
Brookline 526
Brownington 979
Brunswick 113
Buel's Gore 30
Burke 1744
Burlington 42282
Cabot 1452
Calais 1601
Cambridge 3726
Canaan 954
Castleton 4665
Cavendish 1363
Charleston 1014
Charlotte 3812
Chelsea 1241
Chester 3116
Chittenden 1241
Clarendon 2543
Colchester 17245
Concord 1221
Corinth 1370
Cornwall 1174
Coventry 1077
Craftsbury 1195
Danby 1300
Danville 2197
Derby 4562
Dorset 2008
Dover 1113
Dummerston 1840
Duxbury 1336
East Haven 287
East Montpelier 2602
Eden 1345
Elmore 871
Enosburg 2770
Essex 20057
Fair Haven 2693
Fairfax 4398
Fairfield 1920
Fairlee 980
Fayston 1358
Ferdinand 32
Ferrisburgh 2757
Fletcher 1295
Franklin 1417
Georgia 4602
Glastenbury 8
Glover 1113
Goshen 163
Grafton 674
Granby 87
Grand Isle 2069
Granville 297
Greensboro 754
Groton 1020
Guildhall 260
Guilford 2104
Halifax 725
Hancock 322
Hardwick 2968
Hartford 9838
Hartland 3385
Highgate 3568
Hinesburg 4457
Holland 624
Hubbardton 698
Huntington 1969
Hyde Park 3037
Ira 429
Irasburg 1153
Isle La Motte 473
Jamaica 1027
Jay 539
Jericho 5028
Johnson 3495
Killington 802
Kirby 490
Landgrove 159
Leicester 1109
Lemington 102
Lewis 0
Lincoln 1266
Londonderry 1762
Lowell 871
Ludlow 1945
Lunenburg 1287
Lyndon 5969
Maidstone 206
Manchester 4339
Marlboro 1069
Marshfield 1567
Mendon 1051
Middlebury 8477
Middlesex 1756
Middletown Springs 741
Milton 10526
Monkton 2015
Montgomery 1197
Montpelier 7787
Moretown 1666
Morgan 746
Morristown 5335
Mount Holly 1229
Mount Tabor 254
New Haven 1747
Newark 581
Newbury 2212
Newfane 1697
Newport 6281
North Hero 803
Northfield 6185
Norton 165
Norwich 3393
Orange 1075
Orwell 1245
Panton 670
Pawlet 1459
Peacham 726
Peru 371
Pittsfield 543
Pittsford 2943
Plainfield 1257
Plymouth 615
Pomfret 898
Poultney 3387
Pownal 3490
Proctor 1705
Putney 2700
Randolph 4762
Reading 659
Readsboro 751
Richford 2322
Richmond 4093
Ripton 582
Rochester 1126
Rockingham 5190
Roxbury 693
Royalton 2771
Rupert 706
Rutland 20257
Ryegate 1164
Salisbury 1128
Sandgate 403
Searsburg 108
Shaftsbury 3554
Sharon 1497
Sheffield 700
Shelburne 7449
Sheldon 2207
Shoreham 1268
Shrewsbury 1044
Somerset 3
South Burlington 18400
South Hero 1634
Springfield 9284
St. Albans 13030
St. George 680
St. Johnsbury 7591
Stamford 818
Stannard 220
Starksboro 1769
Stockbridge 733
Stowe 4390
Strafford 1102
Stratton 213
Sudbury 553
Sunderland 950
Sutton 1030
Swanton 6436
Thetford 2600
Tinmouth 619
Topsham 1174
Townshend 1223
Troy 1642
Tunbridge 1288
Underhill 3044
Vergennes 2584
Vernon 2192
Vershire 723
Victory 61
Waitsfield 1726
Walden 932
Wallingford 2055
Waltham 478
Wardsboro 890
Warner's Grant 0
Warren 1704
Warren's Gore 4
Washington 1031
Waterbury 5102
Waterford 1285
Waterville 685
Weathersfield 2810
Wells 1144
West Fairlee 659
West Haven 263
West Rutland 2283
West Windsor 1095
Westfield 527
Westford 2043
Westminster 3132
Westmore 347
Weston 563
Weybridge 827
Wheelock 808
Whiting 420
Whitingham 1350
Williamstown 3394
Williston 8962
Wilmington 1853
Windham 416
Windsor 3498
Winhall 762
Winooski 7239
Wolcott 1720
Woodbury 901
Woodford 418
Woodstock 3012
Worcester 1001
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment