Doing stuff
renderData = [
{
append: 'g',
children: topojson.feature(us, us.objects.counties).features.map(d => ({
append: 'path',
fill: color(data.get(d.id)),
d: path(d),
children: [
{
append: 'title',
text: `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${format(data.get(d.id))}`
}
]
}))
},
{
append: 'path',
fill: 'none',
stroke: 'white',
'stroke-linejoin': 'round',
d: path(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
}
]
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]);
// render the map
svg.call(d3.renderSelection, renderData);
// render the legend in ye' old ways
svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({ color, title: data.title, width: 260 }));
return svg.node();
}
data = Object.assign(new Map(d3.csvParse(await FileAttachment("unemployment-x.csv").text(), ({id, rate}) => [id, +rate])), {title: "Unemployment rate (%)"})
color = d3.scaleQuantize([1, 10], d3.schemeBlues[9])
path = d3.geoPath()
format = d => `${d}%`
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5", 'd3-render@0.1.5')
import {legend} from "@d3/color-legend"
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.
