Public
Edited
Oct 30, 2023
caDams
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
y: {
tickFormat: d3.format(".0f"),
type: "linear",
ticks: 20,
line: true,
nice: true,
label: "Year Assessed"
},
x: {
line: true,
label: "Number of Dams"
},
marginRight: 50,
marginLeft: 50,
color: {
scheme: "Turbo",
legend: true ,
label: "Condition Assessed"
},
marks: [
Plot.rectX(
caDams,
Plot.binY(
{ x: "count", interval: 10 },
{ y: "YearCompleted", fill: "ConditionAssessment", tip: true }
)
)
]
})
viewof hazard = Inputs.radio(
caDams.map((d) => d.HazardPotentialClassification).sort(),
{ label: "Highlight hazard", unique: true, value: "High" }
)
Plot.plot({
x: {
label: "Storage (Acre Feet)",
type: "log"
},
y: {
label: "Surface Area (Acres)",
type: "log"
},
r: {
label: "Drainage Area (Sq Miles)",
range: [1.5, 10]
},
marginTop: 60,
marginBottom: 60,
marginLeft: 40,
marks: [
Plot.dot(caDams, {
fill: "grey",
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
r: "DrainageAreaSqMiles",
opacity: 0.2,
channels: {
"Dam Name": "DamName"
}
}),
Plot.dot(caDams, {
filter: (d) => d.HazardPotentialClassification == hazard,
fill: "HazardPotentialClassification",
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
r: "DrainageAreaSqMiles",
tip: true,
channels: {
"Dam Name": "DamName",
"Primary Purpose": "PrimaryPurpose",
"Year Completed": "YearCompleted"
}
}),
Plot.crosshair(caDams, {
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
textFill: "grey",
textStroke: "white",
strokeWidth: 3
})
]
})
viewof yearCompleted = Inputs.range([1850, 2030], {unique: true, label: "Year Completed", reverse: true, step: 1})
viewof hazardMap = Inputs.radio(
caDams.map((d) => d.HazardPotentialClassification).sort(),
{ label: "Highlight hazard", unique: true, value: "High" }
)
md`## California dam location in ${yearCompleted} with ${hazardMap.toLowerCase()} hazard rating`
Plot.plot({
projection: {
type: "albers-usa",
domain: {type: "MultiPoint", coordinates: [[-125, 32], [-114, 32], [-125, 42], [-114, 42]]}
},
marks: [
Plot.geo(caCounties, { stroke: "grey", fill: "black" }),
Plot.dot(caDams, {
filter: (d) => d.YearCompleted <= yearCompleted,
x: "Longitude",
y: "Latitude",
fill: "grey",
opacity: 0.2
}),
Plot.dot(caDams, {
filter: (d) => d.YearCompleted <= yearCompleted && d.HazardPotentialClassification == hazardMap,
x: "Longitude",
y: "Latitude",
fill: "HazardPotentialClassification",
opacity: 0.6,
tip: true,
channels: {
"Dam Name": "DamName",
"Primary Purpose": "PrimaryPurpose",
"Year Completed": "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.
