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
})
]
})