Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
chart = {
const width = 960;
const height = 600;
const path = d3.geoPath();
const x = d3.scaleLinear()
.domain(d3.extent(color.domain()))
.rangeRound([600, 860]);
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const g = svg.append("g")
.attr("transform", "translate(0,40)");
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("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.title + " (×)");
g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(format)
.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
.select(".domain")
.remove();
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)
.append("title")
.text(d => 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();
}
data = {
const map = new Map;
await d3.csv("https://raw.githubusercontent.com/Dreamsh0t/FIPS/95a36f34c9d123d6ff117e3f030941f6669a586d/alcohol_disorders_change.csv", d => {
map.set(d["FIPS Code"], Math.log(1 + d["Percent Change in Alcohol Use Disorders"] / 100));
});
map.title = "Change in Alcohol Use Disorders";
return map;
}
color = d3.scaleQuantize()
.domain([-1.2, 1.2])
.range(d3.schemeRdBu[9].slice().reverse())
format = {
const f = d3.format(".2f");
return d => f(Math.exp(d));
}
us = d3.json("https://unpkg.com/us-atlas@1/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.
