Skip to content

Instantly share code, notes, and snippets.

@dnprock
Last active August 29, 2015 14:23
Show Gist options
  • Save dnprock/b48388ee8bc5582947b6 to your computer and use it in GitHub Desktop.
Save dnprock/b48388ee8bc5582947b6 to your computer and use it in GitHub Desktop.
US States Map with Dropdown Selector
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
/* stylesheet for your custom graph */
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
.states-choropleth {
fill: #ccc;
}
#tooltip-container {
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
border: 1px solid;
display: none;
}
.tooltip_key {
font-weight: bold;
}
.tooltip_value {
margin-left: 20px;
float: right;
}
.option-select {
margin-top: 20px;
margin-left: 40px;
fill: #64b646;
width: auto;
}
</style>
<div id="selectors"></div>
<div id="tooltip-container"></div>
<div id="canvas-svg"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
d3.csv("population.csv", function(err, data) {
var config = {"color1":"#d3e5ff","color2":"#08306B","stateDataColumn":"state_or_territory","defaultValue":"census_population_april_1_2010_number","state":"state_or_territory"};
var WIDTH = 800, HEIGHT = 500;
var COLOR_COUNTS = 9;
var SCALE = 0.7;
function Interpolate(start, end, steps, count) {
var s = start,
e = end,
final = s + (((e - s) / steps) * count);
return Math.floor(final);
}
function Color(_r, _g, _b) {
var r, g, b;
var setColors = function(_r, _g, _b) {
r = _r;
g = _g;
b = _b;
};
setColors(_r, _g, _b);
this.getColors = function() {
var colors = {
r: r,
g: g,
b: b
};
return colors;
};
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function valueFormat(d) {
if (d > 1000000000) {
return Math.round(d / 1000000000 * 10) / 10 + "B";
} else if (d > 1000000) {
return Math.round(d / 1000000 * 10) / 10 + "M";
} else if (d > 1000) {
return Math.round(d / 1000 * 10) / 10 + "K";
} else {
return d;
}
}
var fields = Object.keys(data[0]);
var option_select = d3.select('#selectors').append("select")
.attr("class", "option-select");
for (var i = 0; i < fields.length; i++) {
if (fields[i] !== config.state) {
var opt = option_select.append("option")
.attr("value", fields[i])
.text(fields[i]);
if (fields[i] === config.defaultValue) {
opt.attr("selected", "true");
}
}
}
var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;
var rgb = hexToRgb(COLOR_FIRST);
var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);
rgb = hexToRgb(COLOR_LAST);
var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);
var width = WIDTH,
height = HEIGHT;
var startColors = COLOR_START.getColors(),
endColors = COLOR_END.getColors();
var colors = [];
for (var i = 0; i < COLOR_COUNTS; i++) {
var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
colors.push(new Color(r, g, b));
}
var quantize = d3.scale.quantize()
.domain([0, 1.0])
.range(d3.range(COLOR_COUNTS).map(function(i) { return i }));
var path = d3.geo.path();
var svg = d3.select("#canvas-svg").append("svg")
.attr("width", width)
.attr("height", height);
d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {
d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
var name_id_map = {};
var id_name_map = {};
for (var i = 0; i < names.length; i++) {
name_id_map[names[i].name] = names[i].id;
id_name_map[names[i].id] = names[i].name;
}
var dataMap = {};
data.forEach(function(d) {
if (!dataMap[d[config.state]]) {
dataMap[d[config.state]] = {};
}
for (var i = 0; i < Object.keys(data[0]).length; i++) {
if (Object.keys(data[0])[i] !== config.state) {
dataMap[d[config.state]][Object.keys(data[0])[i]] =
+d[Object.keys(data[0])[i]];
}
}
});
function drawMap(dataColumn) {
var valueById = d3.map();
data.forEach(function(d) {
var id = name_id_map[d[config.state]];
valueById.set(id, +d[dataColumn]);
});
quantize.domain([d3.min(data, function(d){ return +d[dataColumn] }),
d3.max(data, function(d){ return +d[dataColumn] })]);
svg.append("g")
.attr("class", "states-choropleth")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("transform", "scale(" + SCALE + ")")
.style("fill", function(d) {
if (valueById.get(d.id)) {
var i = quantize(valueById.get(d.id));
var color = colors[i].getColors();
return "rgb(" + color.r + "," + color.g +
"," + color.b + ")";
} else {
return "";
}
})
.attr("d", path)
.on("mousemove", function(d) {
var html = "";
html += "<div class=\"tooltip_kv\">";
html += "<span class=\"tooltip_key\">";
html += id_name_map[d.id];
html += "</span>";
html += "</div>";
for (var i = 1; i < Object.keys(data[0]).length; i++) {
html += "<div class=\"tooltip_kv\">";
html += "<span class='tooltip_key'>";
html += Object.keys(data[0])[i];
html += "</span>";
html += "<span class=\"tooltip_value\">";
html += valueFormat(dataMap[id_name_map[d.id]][Object.keys(data[0])[i]]);
html += "";
html += "</span>";
html += "</div>";
}
$("#tooltip-container").html(html);
$(this).attr("fill-opacity", "0.7");
$("#tooltip-container").show();
var coordinates = d3.mouse(this);
var map_width = $('.states-choropleth')[0].getBoundingClientRect().width;
if (d3.event.layerX < map_width / 2) {
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX + 15) + "px");
} else {
var tooltip_width = $("#tooltip-container").width();
d3.select("#tooltip-container")
.style("top", (d3.event.layerY + 15) + "px")
.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
}
})
.on("mouseout", function() {
$(this).attr("fill-opacity", "1.0");
$("#tooltip-container").hide();
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("transform", "scale(" + SCALE + ")")
.attr("d", path);
}
drawMap(config.defaultValue);
option_select.on("change", function() {
drawMap($("#selectors").find(".option-select").val());
});
});
});
});
</script>
state_or_territory population_estimate_for_july_1_2013_number census_population_april_1_2010_number census_population_april_1_2000_number
California 38332521 37253956 33871648
Texas 26448193 25145561 20851820
New York 19651127 19378102 18976457
Florida 19552860 18801310 15982378
Illinois 12882135 12830632 12419293
Pennsylvania 12773801 12702379 12281054
Ohio 11570808 11536504 11353140
Georgia 9992167 9687653 8186453
Michigan 9895622 9883640 9938444
North Carolina 9848060 9535483 8049313
New Jersey 8899339 8791894 8414350
Virginia 8260405 8001024 7078515
Washington 6971406 6724540 5894121
Massachusetts 6692824 6547629 6349097
Arizona 6626624 6392017 5130632
Indiana 6570902 6483802 6080485
Tennessee 6495978 6346105 5689283
Missouri 6044171 5988927 5595211
Maryland 5928814 5773552 5296486
Wisconsin 5742713 5686986 5363675
Minnesota 5420380 5303925 4919479
Colorado 5268367 5029196 4301261
Alabama 4833722 4779736 4447100
South Carolina 4774839 4625364 4012012
Louisiana 4625470 4533372 4468976
Kentucky 4395295 4339367 4041769
Oregon 3930065 3831074 3421399
Oklahoma 3850568 3751351 3450654
Puerto Rico 3615086 3725789 3808610
Connecticut 3596080 3574097 3405565
Iowa 3090416 3046355 2926324
Mississippi 2991207 2967297 2844658
Arkansas 2959373 2915918 2673400
Utah 2900872 2763885 2233169
Kansas 2893957 2853118 2688418
Nevada 2790136 2700551 1998257
New Mexico 2085287 2059179 1819046
Nebraska 1868516 1826341 1711263
West Virginia 1854304 1852994 1808344
Idaho 1612136 1567582 1293953
Hawaii 1404054 1360301 1211537
Maine 1328302 1328361 1274923
New Hampshire 1323459 1316470 1235786
Rhode Island 1051511 1052567 1048319
Montana 1015165 989415 902195
Delaware 925749 897934 783600
South Dakota 844877 814180 754844
Alaska 735132 710231 626932
North Dakota 723393 672591 642200
District of Columbia 646449 601723 572059
Vermont 626630 625741 608827
Wyoming 582658 563626 493782
Guam 159358; 1 154805
U.S. Virgin Islands 106405; 2 108612
American Samoa 55519; 3 57291
Northern Mariana Islands 53883; 4 69221
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment