Visual Journalist @ Axios
map = Plot.plot({
width: 960,
height: 600,
projection: "albers-usa",
marks: [
Plot.geo(nation, { fill: "#e0e0e0" }),
Plot.geo(statemesh, { stroke: "white" }),
// Plot.image(counties.features, Plot.centroid({ stroke: "red", length: (d) => population.get(d.id), src: "https://cdn-icons-png.flaticon.com/512/8434/8434683.png", height: 20 })),
// legendSpike([2e6, 4e6, 6e6, 8e6, 10e6], {stroke: "red"}),
Plot.image(milk, {
x: "long",
y: "lat",
src: "https://cdn-icons-png.flaticon.com/512/5900/5900626.png",
// r: 10,
fill: "#f00",
// symbol: "square"
// height: 50
height: (d) => d.price * 10
})
]
})
function legendSpike(values, {frameAnchor = "bottom-right", format = "~s", stroke} = {}) {
if (!Array.isArray(values)) values = Array.from(values);
if (typeof format !== "function") format = d3.format(format);
return Plot.marks(
values.map((v, i) => {
const dx = (i - values.length) * 18;
return [
Plot.spike([v], {
length: [v],
dx,
dy: -20,
frameAnchor,
stroke
}),
Plot.text([v], {
text: [format(v)],
dx,
dy: -10,
frameAnchor,
textAnchor: "middle"
})
];
})
);
}
milk = FileAttachment("milk.csv").csv({typed: true})
population = FileAttachment("population.csv").csv()
.then((data) => new Map(data.map(({state, county, population}) => [`${state}${county}`, +population])))
us = FileAttachment("us-counties-10m.json").json()
nation = topojson.feature(us, us.objects.nation)
statemap = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d]))
counties = topojson.feature(us, us.objects.counties)
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
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.
