Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/index.html

Last active April 13, 2018 17:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jadiehm/8f5adc05465a94e77e30 to your computer and use it in GitHub Desktop.
Save jadiehm/8f5adc05465a94e77e30 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive US state choropleth
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: 'Proxima Nova', sans-serif;
}
.g-hed {
text-align: left;
text-transform: uppercase;
font-weight: bold;
font-size:22px;
margin: 3px 0;
}
.g-source-bold {
text-align: left;
font-size:10px;
font-weight: bold;
}
.g-source-reg {
text-align: left;
font-size:10px;
}
.g-source {
margin: 10px 0;
}
.g-intro {
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.states {
fill: #d3d3d3;
stroke: #ffffff;
stroke-linejoin: round;
}
.q0-9 { fill: #d9e0f2; }
.q1-9 { fill: #99b2dc; }
.q2-9 { fill: #5e8dc9; }
.q3-9 { fill: #2f5491; }
.q4-9 { fill: #0e2344; }
#q0-9 { background-color: #d9e0f2; }
#q1-9 { background-color: #99b2dc; }
#q2-9 { background-color: #5e8dc9; }
#q3-9 { background-color: #2f5491; }
#q4-9 { background-color: #0e2344; }
div.tooltip {
position: absolute;
left: 75px;
text-align: center;
height: 12px;
padding: 8px;
font-size: 13px;
font-family: 'Proxima-Nova', sans-serif;
background: #FFFFFF;
border: 1px solid #989898;
pointer-events: none;
}
.block {
width:18%;
height: 15px;
display:inline-block;
}
</style>
<body>
<h5 class="g-hed"></h5>
<p class="g-intro"></p>
<div class="g-chart"></div>
<div class="legend">
<div class="block" id="q0-9"></div>
<div class="block" id="q1-9"></div>
<div class="block" id="q2-9"></div>
<div class="block" id="q3-9"></div>
<div class="block" id="q4-9"></div>
</div>
<div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>
//Creates tooltip and makes it invisiblae
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Sets dimensions
var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = window.outerWidth
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
//Tells the nap what projection to use
var projection = d3.geo.albersUsa()
.scale(width)
.translate([width / 2, height / 2]);
//Tells the map how to draw the paths from the projection
var path = d3.geo.path()
.projection(projection);
//Appened svg to page
var map = d3.select(".g-chart").append("svg")
.style('height', height + 'px')
.style('width', width + 'px');
//Load the files
queue()
.defer(d3.json, "us.json")
.defer(d3.csv, "maptemplate.csv")
.await(ready);
//Moves selection to front
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
//Moves selection to back
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
function ready(error, us, maptemplate) {
if (error) throw error;
console.log(us, maptemplate);
//Sets color scale
var numMedian = d3.median(maptemplate, function(d) { return d.num;});
var quantize = d3.scale.quantize()
.domain([0, numMedian])
.range(d3.range(5).map(function(i) { return "q" + i + "-9"; }));
//Pair data with state id
var dataByFIPS = {};
maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = +d.num; });
//Pair state name with state id
var stateByFIPS = {};
maptemplate.forEach(function(d) { stateByFIPS[d.FIPS] = d.state; });
//Appends chart headline
d3.select(".g-hed").text("Map headline goes here");
//Appends chart intro text
d3.select(".g-intro").text("Map intro text goes here. Write a short sentence describing the map here.");
//Append states
map.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
//Color states
.attr("class", function(d) { return quantize(dataByFIPS[d.id]); })
//Hovers
.on("mouseover", function(d) {
var sel = d3.select(this);
sel.moveToFront();
d3.select(this).transition().duration(300).style("opacity", 0.8);
div.transition().duration(300)
.style("opacity", 1)
div.text(stateByFIPS[d.id] + ": " + dataByFIPS[d.id])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY -30) + "px");
})
.on("mouseout", function() {
var sel = d3.select(this);
sel.moveToBack();
d3.select(this)
.transition().duration(300)
.style("opacity", 1);
div.transition().duration(300)
.style("opacity", 0);
});
//Appends chart source
d3.select(".g-source-bold")
.text("SOURCE: ")
.attr("class", "g-source-bold");
d3.select(".g-source-reg")
.text("Chart source info goes here")
.attr("class", "g-source-reg");
//RESPONSIVENESS
d3.select(window).on('resize', resize);
function resize() {
var w = d3.select(".g-chart").node().clientWidth;
console.log("resized", w);
// adjust things when the window size changes
width = w - margin.left - margin.right;
height = width * mapRatio;
console.log(width)
// update projection
var newProjection = d3.geo.albersUsa()
.scale(width)
.translate([width / 2, height / 2]);
//Update path
path = d3.geo.path()
.projection(newProjection);
// resize the map container
map
.style('width', width + 'px')
.style('height', height + 'px');
// resize the map
map.selectAll("path").attr('d', path);
}
}
</script>
Raw
maptemplate.csv
state num FIPS
Alabama 6 01
Alaska 1 02
Arizona 23 04
Arkansas 4 05
California 30 06
Colorado 34 08
Connecticut 14 09
Delaware 48 10
Florida 11 12
Georgia 41 13
Hawaii 0 15
Idaho 7 16
Illinois 18 17
Indiana 16 18
Iowa 33 19
Kansas 22 20
Kentucky 8 21
Louisiana 7 22
Maine 24 23
Maryland 106 24
Massachusetts 42 25
Michigan 21 26
Minnesota 165 27
Mississippi 3 28
Missouri 13 29
Montana 6 30
Nebraska 17 31
Nevada 55 32
New Hampshire 6 33
New Jersey 69 34
New Mexico 3 35
New York 48 36
North Carolina 19 37
North Dakota 16 38
Ohio 41 39
Oklahoma 9 40
Oregon 14 41
Pennsylvania 30 42
Rhode Island 51 44
South Carolina 6 45
South Dakota 25 46
Tennessee 25 47
Texas 26 48
Utah 13 49
Vermont 20 50
Virginia 75 51
Washington 73 53
West Virginia 1 54
Wisconsin 7 55
Wyoming 16 56
Display the source blob
Display the rendered blob
Raw
us.json
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