Data Analyst with a passion for Data visualization and storytelling
Public
Edited
Aug 4, 2023
states@9.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { usNYTGridMap } from "@severo/quality-criteria-for-existing-grid-maps"
import { addTooltips } from "@mkfreeman/plot-tooltip"
import { us } from "@observablehq/us-geographic-data"
nation = topojson.feature(us, us.objects.nation)
states = topojson.feature(us, us.objects.states)
Plot.plot({
r: { range: [0, 30] },
style: {
fontSize: "12pt",
fontFamily: "Belanosima"
},
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "#ece4db", stroke: "#9C9C9C" }),
Plot.dot(states9, {
x: "longitude",
y: "latitude",
strokeOpacity: 0.5,
fill: "Is_capital_city",
r: "est_pop_2022",
opacity: 0.7,
stroke: "black"
}),
Plot.text(states9, {
x: "longitude",
y: "latitude",
text: "largest_city",
dx: 1.2,
dy: 15
}),
radiusLegend([2, 5, 10], {
r: (d) => d * 1e6,
title: (d) => `${d}M`
})
],
color: { legend: true, type: "categorical", range: ["#6c17b6", "#ff5e00"] },
width: 1000,
height: 1000
})
radiusLegend = (data, options) =>
Plot.dot(data, {
...options,
frameAnchor: "bottom-right",
strokeWidth: 0.8,
dx: -40,
dy: -20,
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
d3.select(g)
.selectAll("circle")
.each(function (i) {
const r = +this.getAttribute("r");
const x = +this.getAttribute("cx");
const y = +this.getAttribute("cy");
this.setAttribute("transform", `translate(0,${-r})`);
const title = d3.select(this).select("title");
d3.select(g)
.append("text")
.attr("x", x)
.attr("y", y - 2 * r - 4)
.attr("stroke", "none")
.attr("fill", "currentColor")
.text(title.text());
title.remove();
});
return g;
}
})
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.
