Skip to content

Instantly share code, notes, and snippets.

@denisemauldin

denisemauldin/.block

Last active March 19, 2019 19:14
Show Gist options
  • Save denisemauldin/3436a3ae06f73a492228059a515821fe to your computer and use it in GitHub Desktop.
Save denisemauldin/3436a3ae06f73a492228059a515821fe to your computer and use it in GitHub Desktop.
Download ZIP
Choropleth V5
Raw
.block
license: gpl-3.0
height: 600
border: no
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.counties {
fill: none;
}
.states {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var unemployment = d3.map();
var stateNames = d3.map();
var path = d3.geoPath();
var x = d3.scaleLinear()
.domain([1, 10])
.rangeRound([600, 860]);
var color = d3.scaleThreshold()
.domain(d3.range(0, 10))
.range(d3.schemeBlues[9]);
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(0,40)");
g.selectAll("rect")
.data(color.range().map(function(d) {
d = color.invertExtent(d);
if (d[0] == null) d[0] = x.domain()[0];
if (d[1] == null) d[1] = x.domain()[1];
return d;
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return x(d[0]); })
.attr("width", function(d) { return x(d[1]) - x(d[0]); })
.attr("fill", function(d) { return color(d[0]); });
g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Unemployment rate");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(function(x, i) { return i ? x : x + "%"; })
.tickValues(color.domain()))
.select(".domain")
.remove();
var promises = [
d3.json("https://d3js.org/us-10m.v1.json"),
d3.tsv("us-state-names.tsv", function(d) {
stateNames.set(d.id, d.name)
}),
d3.tsv("map.tsv", function(d) {
console.log("d in map", d);
unemployment.set(d.name, +d.value);
})
]
console.log("before promises")
Promise.all(promises).then(ready)
function ready([us]) {
console.log("in ready", topojson.feature(us, us.objects.states).features)
console.log("statenames", stateNames)
console.log("employment", unemployment)
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("fill", function(d) {
console.log("d", d)
console.log("unemployment", unemployment)
var sn = stateNames.get(d.id)
console.log("sn",sn)
d.rate = unemployment.get(stateNames.get(d.id)) || 0
console.log("rate", d.rate)
var col = color(d.rate);
console.log("col", col)
if (col) {
console.log("found col", col, "for d", d)
return col
} else {
return '#ffffff'
}
})
.attr("d", path)
.append("title")
.text(function(d) {
console.log("title", d)
return d.rate + "%"; });
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
}
</script>
Raw
map.tsv
name value
Florida 2
New Mexico 3
Arkansas 2
Oregon 0
Tennessee 9
Raw
us-state-names.tsv
id code name
1 AL Alabama
2 AK Alaska
4 AZ Arizona
5 AR Arkansas
6 CA California
8 CO Colorado
9 CT Connecticut
10 DE Delaware
11 DC District of Columbia
12 FL Florida
13 GA Georgia
15 HI Hawaii
16 ID Idaho
17 IL Illinois
18 IN Indiana
19 IA Iowa
20 KS Kansas
21 KY Kentucky
22 LA Louisiana
23 ME Maine
24 MD Maryland
25 MA Massachusetts
26 MI Michigan
27 MN Minnesota
28 MS Mississippi
29 MO Missouri
30 MT Montana
31 NE Nebraska
32 NV Nevada
33 NH New Hampshire
34 NJ New Jersey
35 NM New Mexico
36 NY New York
37 NC North Carolina
38 ND North Dakota
39 OH Ohio
40 OK Oklahoma
41 OR Oregon
42 PA Pennsylvania
44 RI Rhode Island
45 SC South Carolina
46 SD South Dakota
47 TN Tennessee
48 TX Texas
49 UT Utah
50 VT Vermont
51 VA Virginia
53 WA Washington
54 WV West Virginia
55 WI Wisconsin
56 WY Wyoming
60 AS America Samoa
64 FM Federated States of Micronesia
66 GU Guam
68 MH Marshall Islands
69 MP Northern Mariana Islands
70 PW Palau
72 PR Puerto Rico
74 UM U.S. Minor Outlying Islands
78 VI Virgin Islands of the United States
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment