I’m a content strategist living in PDX.
This is my personal account. My government work is @brentryanjohnson.
chart = {
const path = d3.geoPath();
const svg = d3.create("svg")
.attr("viewBox", "0 0 960 600")
.attr("fill", "#E0E0E0")
.style("width", "100%")
.style("height", "auto");
svg.append("g")
.attr("transform", "translate(600,40)")
.call(legend);
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
.attr("stroke", "white")
.append("title")
.text(d => `${d.properties.name} County, ${states.get(d.id.slice(0, 2)).name}
${format(data.get(d.id))}`);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
legend = g => {
const x = d3.scaleLinear()
.domain(d3.extent(color.domain()))
.rangeRound([0, 260]);
g.selectAll("path d")
.data(color.range().map(d => color.invertExtent(d)))
.join("rect")
.attr("height", 8)
.attr("x", d => x(d[0]))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("fill", d => color(d[0]));
g.selectAll("rect")
.data(color.range().map(d => color.invertExtent(d)))
.join("rect")
.attr("height", 8)
.attr("x", d => x(d[0]))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("fill", d => color(d[0]));
g.append("text")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.title);
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(d => { return "$" + d3.format(".2s")(d); })
.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
.select(".domain")
.remove();
}
data = Object.assign(new Map(await d3.csv("https://raw.githubusercontent.com/rentry/rentry.github.io/master/data/revenue-test.csv", ({id, rate}) => [id, +rate])), {title: "Revenue by county"})
color = d3.scaleQuantize([0, 100000000], d3.schemeYlGnBu[8])
format = d => { return "$" + d3.format(",.0f")(d); }
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
