Skip to content

Instantly share code, notes, and snippets.

@mtandre

mtandre/index.html

Last active October 2, 2017 07:15
Show Gist options
  • Save mtandre/9a927569ec8bcfef98fa92f3cd449474 to your computer and use it in GitHub Desktop.
Save mtandre/9a927569ec8bcfef98fa92f3cd449474 to your computer and use it in GitHub Desktop.
Download ZIP
usa map
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
</head>
<body>
<svg></svg>
<script type="text/javascript">
var w = 800,
h = 400;
var color = d3.scaleQuantize()
.range(d3.schemeGreens[8]);
var formatAsThousands = d3.format(",");
var projection = d3.geoAlbersUsa()
.translate([w/2, h/2])
.scale(800);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select('svg')
.attr('width', w)
.attr('height', h);
var plot = function(e, data, states, cities){
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = parseFloat(data[i].value);
for (var j = 0; j < states.features.length; j++) {
var jsonState = states.features[j].properties.name;
if (dataState == jsonState) {
states.features[j].properties.value = dataValue;
break;
}
}
}
svg.selectAll('path')
.data(states.features)
.enter()
.append('path')
.attr('d', path)
.style('fill', function(d) {
var value = d.properties.value;
return (value) ? color(value) : '#ccc';
})
.attr('class', function(d) {
return 'state ' + d.properties.name.toLowerCase().replace(' ', '-');
});
svg.selectAll('circle')
.data(cities)
.enter()
.append('circle')
.attr('cx', function(d) {
return projection([d.lon, d.lat])[0];
})
.attr('cy', function(d) {
return projection([d.lon, d.lat])[1];
})
.attr('r', function(d) {
return Math.sqrt(parseInt(d.population) * 0.00004);
})
.style('fill', 'yellow')
.style('stroke', '#ccc')
.style('stroke-width', 0.25)
.style('opacity', 0.75)
.append('title')
.text(function(d) {
return d.place + ': Pop. ' + formatAsThousands(d.population);
});
}
d3.queue()
.defer(d3.csv, 'us-ag-productivity.csv')
.defer(d3.json, 'us-states.json')
.defer(d3.csv, 'us-cities.csv')
.await(plot);
</script>
</body>
</html>
Raw
us-ag-productivity.csv
state value
Alabama 1.1791
Arkansas 1.3705
Arizona 1.3847
California 1.7979
Colorado 1.0325
Connecticut 1.3209
Delaware 1.4345
Florida 1.6304
Georgia 1.3891
Iowa 1.5297
Idaho 1.4285
Illinois 1.5297
Indiana 1.4220
Kansas 1.0124
Kentucky 0.9403
Louisiana 0.9904
Maine 1.3877
Maryland 1.2457
Massachusetts 1.1458
Michigan 1.1058
Minnesota 1.2359
Missouri 1.0212
Mississippi 1.1306
Montana 0.8145
North Carolina 1.3554
North Dakota 1.0278
Nebraska 1.1619
New Hampshire 1.0204
New Jersey 1.2831
New Mexico 0.8925
Nevada 0.9640
New York 1.1327
Ohio 1.2075
Oklahoma 0.7693
Oregon 1.3154
Pennsylvania 1.0601
Rhode Island 1.4192
South Carolina 1.1247
South Dakota 1.0760
Tennessee 0.7648
Texas 0.8873
Utah 0.9638
Virginia 0.9660
Vermont 1.0762
Washington 1.1457
Wisconsin 1.1130
West Virginia 0.5777
Wyoming 0.5712
Raw
us-cities.csv
rank place population lat lon
1 New York 8550405 40.71455 -74.007124
2 Los Angeles 3971883 34.05349 -118.245319
3 Chicago 2720546 41.88415 -87.632409
4 Houston 2296224 29.76045 -95.369784
5 Philadelphia 1567442 39.95228 -75.162454
6 Phoenix 1563025 33.44826 -112.075774
7 San Antonio 1469845 29.42449 -98.494619
8 San Diego 1394928 32.715695 -117.161719
9 Dallas 1300092 32.778155 -96.795404
10 San Jose 1026908 37.338475 -121.885794
11 Austin 931830 30.267605 -97.742984
12 Jacksonville 868031 30.33147 -81.656219
13 San Francisco 864816 37.777125 -122.419644
14 Indianapolis 853173 39.76691 -86.149964
15 Columbus 850106 39.96196 -83.002984
16 Fort Worth 833319 32.748855 -97.329389
17 Charlotte 827097 35.22269 -80.837764
18 Seattle 684451 47.60356 -122.329439
19 Denver 682545 39.74001 -104.992259
20 El Paso 681124 31.759165 -106.487494
21 Detroit 677116 42.331685 -83.047924
22 Washington 672228 38.89037 -77.031959
23 Boston 667137 42.358635 -71.056699
24 Memphis 655770 35.149766 -90.049259
25 Nashville-Davidson 654610 36.167783 -86.778365
26 Portland 632309 45.511795 -122.675629
27 Oklahoma City 631346 35.472015 -97.520354
28 Las Vegas 623747 36.171915 -115.139974
29 Baltimore 621849 39.290585 -76.609264
30 Louisville/Jefferson County 615366 38.25486 -85.766404
31 Milwaukee 600155 43.04181 -87.906844
32 Albuquerque 559121 35.08418 -106.648639
33 Tucson 531641 32.221553 -110.969754
34 Fresno 520052 36.740685 -119.785734
35 Sacramento 490712 38.579065 -121.491014
36 Kansas City 475378 39.11338 -94.626824
37 Long Beach 474140 33.766725 -118.192399
38 Mesa 471825 33.417045 -111.831459
39 Atlanta 463878 33.748315 -84.391109
40 Colorado Springs 456568 38.83345 -104.821814
41 Virginia Beach 452745 36.75502 -76.059204
42 Raleigh 451066 35.78551 -78.642669
43 Omaha 443885 41.260675 -95.940469
44 Miami 441003 25.728985 -80.237419
45 Oakland 419267 37.805065 -122.273024
46 Minneapolis 410939 44.979035 -93.264929
47 Tulsa 403505 36.149745 -95.993334
48 Wichita 389965 37.68698 -97.335579
49 New Orleans 389617 29.9564 -90.0758
50 Arlington 388125 38.89051 -77.086294
Display the source blob
Display the rendered blob
Raw
us-states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment