Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }),
Plot.dot(data, {
x: "longitude",
y: "latitude",
r: "incarcerated_total",
fill: "incarcerated_total",
}),
Plot.text(
data,
{
x: "longitude",
y: "latitude",
text: "state",
filter: (d => d.incarcerated_total > 50000),
fontSize: 12,
fontWeight: 600,
stroke: "white",
fill: "black",
textAnchor: "start",
dx: 15
}
),
],
color: {
type: "linear",
scheme: "Oranges",
legend: true,
range: [0, 2]
},
width: 802
})
per_state_with_coordinates.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import {us} from "@observablehq/us-geographic-data"
nation = topojson.feature(us, us.objects.nation)
counties = topojson.feature(us, us.objects.counties)
states = topojson.feature(us, us.objects.states)
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }), // Updated stroke color for state boundaries
Plot.dot(per_state_with_coordinates, {
x: "longitude",
y: "latitude",
r: "incarcerated_total",
fill: "PrimSource", // Update dot fill color to depend on primary source (variable: PrimSource)
opacity: 0.7 // Decrease opacity (0 = transparent, 1 = opaque)
})
],
r: { range: [1, 15] }, // Limit the size range for dot radii
color: { legend: true }, // Include a legend for the fill color
height: 500,
width: 800,
margin: 50
})
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.
