I’m a content strategist living in PDX.
This is my personal account. My government work is @brentryanjohnson.
chart = {
const width = 960;
const height = 600;
const path = d3.geoPath();
let format = d => { return "$" + d3.format(",.0f")(d); }
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.attr("fill", "#E0E2E3");
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", "#CACBCC")
.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", "#9FA0A1")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
legend = g => {
const width = 240;
g.append("image")
.attr("width", width)
.attr("height", 8)
.attr("preserveAspectRatio", "none")
.attr("xlink:href", ramp(color.interpolator()).toDataURL());
g.append("text")
.attr("class", "caption")
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.title);
g.call(d3.axisBottom(d3.scalePoint(["lowest", "median", "highest"], [0, width]))
.tickSize(13))
.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 from natural resources on federal land"})
color = d3.scaleSequentialQuantile([...data.values()], t => d3.interpolateBlues(t))
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {ramp} from "@mbostock/color-ramp"
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.
