Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
caDams
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
subtitle: "Color: Condition Assessment",
width: 900,
color: {
legend: true,
domain: conditions,
range: colors,
unknown: "blue"
},
x: {label: "Decade"},
y: {label: "Number of dams", grid: true, tickFormat: (d) => (d+"").replace("-", "")},
marks: [
Plot.rectY(
caDams.map((m) => ({ year: new Date("" + m.YearCompleted), ...m })),
Plot.binX(
{ y: "count" },
{
filter: (f) => conditions.includes(f.ConditionAssessment),
x: "year",
fill: "ConditionAssessment",
tip: true,
interval: "10 years",
order: (a, b) => conditions.indexOf(a[0].ConditionAssessment) - conditions.indexOf(b[0].ConditionAssessment)
}
)
),
Plot.rectY(
caDams.map((m) => ({ year: new Date("" + m.YearCompleted), ...m })),
Plot.binX(
{ y: (v) => -v.length },
{
filter: (f) => !conditions.includes(f.ConditionAssessment),
x: "year",
fill: "lightgrey",
interval: "10 years"
}
)
),
Plot.ruleY([0]),
Plot.tip(
[`◻️ No data on condition assessment`],
{x: new Date("1900"), y: -40, dy: 0, anchor: "right", stroke: "none"}
)
]
})
Plot.plot({
marginTop: 40,
marginRight: 20,
marginLeft: 60,
subtitle: "Color: Hazard Potential Classification",
x: {type: "log", grid: true, domain: [10, 1e7]},
y: {type: "log", grid: true, domain: [1, 1e6]},
color: {legend: true, unknown: "blue", domain: ["Low","Significant","High"].reverse(), range: d3.schemeSet1},
marks: [
Plot.dot(caDams, {
filter: f => hazard === "All" || f.HazardPotentialClassification === hazard,
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
r: "DrainageAreaSqMiles",
stroke: "none",
fill: "HazardPotentialClassification",
}),
Plot.dot(caDams, {
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
r: "DrainageAreaSqMiles",
strokeWidth: 0.5,
title: d => `${d.DamName}
\nSurface: ${d.SurfaceAreaAcres} acres\nStorage: ${d.StorageAcreFeet} acrefeet\nDrainage area: ${d.DrainageAreaSqMiles} miles²`,
tip: true
})
]
})
Plot.plot({
subtitle: "Color: Hazard Potential Classification",
projection: { type: "mercator", domain: caCounties },
color: {
legend: true,
unknown: "blue",
domain: ["Low", "Significant", "High"].reverse(),
range: d3.schemeSet1
},
r: { range: [1, 50] },
marks: [
Plot.graticule(),
Plot.geo(caCounties, { fill: "#eee", stroke: "#aaa", strokeWidth: 0.5 }),
Plot.dot(
caDams,
Plot.pointer({
filter: f => (2023 - f.YearCompleted) > older,
x: "Longitude",
y: "Latitude",
r: size,
fill: "none",
stroke: "black",
strokeWidth: 2
})
),
Plot.dot(caDams, {
filter: f => (2023 - f.YearCompleted) > older,
x: "Longitude",
y: "Latitude",
r: size,
sort: size,
reverse: true,
fill: "HazardPotentialClassification",
stroke: "white",
paintOrder: "stroke",
opacity: 0.5,
tip: true,
title: (d) => `${d.DamName} \nCompleted in ${d.YearCompleted}`
})
]
})
dams = FileAttachment("californiaDams.csv").csv({typed: true})
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.
