The avatar for @mbostock
Mike Bostock
Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Oct 5, 2019
Fork of BMI Classification Prevalence Mapping
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 900, 610]);

svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() =>
legend({
color: prevScale,
title: 'Prev. of Obesity (%)',
width: 260
})
);

svg
.append("g")
.selectAll("path")
.data(topojson.feature(TJHD_ZCTAs, TJHD_ZCTAs.objects.TJHD_ZCTAs).features)
.join("path")
.attr(
"fill",
d => prevScale(prev_by_ZCTA.get(d.properties.ZCTA5CE10)) || "white"
)
.attr('stroke', '#404040')
.attr("d", path)
.append("title")
.text(
d =>
`${d.properties.ZCTA5CE10}: ${prev_by_ZCTA.get(
d.properties.ZCTA5CE10
) || '-'}\%`
);

return svg.node();
}
Insert cell
projection = d3
.geoMercator()
.center([1.6, 37.95])
.rotate([80, 0])
.scale(21000)
.translate([900 / 2, 610 / 2])
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
TJHD_ZCTAs = d3.json("https://api.myjson.com/bins/jidjj")
Insert cell
Removed in parent
data = d3.csv("https://gist.githubusercontent.com/bjl2n/fe28782b53917eb9aabe7f279d5e0eea/raw")
Insert cell
Changed in fork
-
prev_by_ZCTA = new Map(
  await d3.csv(
    "https://gist.githubusercontent.com/bjl2n/fe28782b53917eb9aabe7f279d5e0eea/raw",
    ({ ZCTA, Underweight }) => [ZCTA, d3.format(".1f")(Underweight * 100)]
  )
)
+
prev_by_ZCTA = new Map(data.map(d => [d.ZCTA, +d3.format(".1f")(d[classification] * 100)]))
Insert cell
prevScale = d3.scaleThreshold(
[15, 25, 35, 45],
['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000']
)
Insert cell
Changed in fork
-
topojson = require('topojson')
+
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell