Public
Edited
Nov 7, 2023
caDams
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: {
//type: "band", // ⚠️ not utc
interval: 10,
tickFormat: (d) => `${d}'s`,
label: "Decade Completed"
},
y: {
label: "Count of Assessments"
},
color: {
domain: ["Poor", "Fair", "Satisfactory", "No data"],
range: ["red", "orange", "green", "#ccc"]
},
marks: [
Plot.barY(
caDams,
Plot.stackY(
Plot.groupX(
{ y: "count" },
{
x: "YearCompleted",
fill: "ConditionAssessment",
sort: "ConditionAssessment",
tip: true
}
)
)
),
Plot.ruleY([0])
]
})
Plot.plot({
color: {
domain: ["Low", "Significant", "High"],
range: ["green", "orange", "red"]
},
x: {type: "log"},
y: {type: "log"},
insetTop: 25,
marks: [
Plot.dot(caDams, {x: "NormalStorageAcreFeet", y: "SurfaceAreaAcres",r: "DrainageAreaSqMiles", fill:"HazardPotentialClassification",tip:true,
opacity:0.7, channels:{Name:"DamName",PrimaryPurpose: "PrimaryPurpose"}})
]
})
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({ y: "sum" }, { x: "date", y: "value" })),
Plot.frame({ stroke: "#d3d3d3" })
],
height: 400,
width: 702,
marginLeft: 50,
marginRight: 50,
marginTop: 50,
marginBottom: 50,
insetTop: 71,
insetBottom: 0,
insetLeft: 0,
insetRight: 0
})
viewof selectHazardPotentialClassification = Inputs.select(caDams.map(d => d.HazardPotentialClassification),{ label: "Hazard Potential",unique:true})
viewof rangeYearCompleted = Inputs.range(d3.extent(caDams,d => d.YearCompleted), {label: "Year Completed", step: 1})
selectedDams = caDams.filter((d) => d.HazardPotentialClassification === selectHazardPotentialClassification && d.YearCompleted === rangeYearCompleted)
Plot.plot({ // Initialize the plot
projection: {type: "mercator", domain: caCounties}, // Set the projection
marks: [
Plot.geo(caCounties),
Plot.dot(selectedDams, {
x: "Longitude",
y: "Latitude",
fill: "PrimaryPurpose",
r: "VolumeCubicYards",
opacity: 0.7,
z: selectHazardPotentialClassification,
tip:true,
channels:{Name:"DamName",PrimaryPurpose: "PrimaryPurpose", HazardPotentialClassification:"HazardPotentialClassification"},
})
],
height: 500, // Update canvas height
width: 800, // Update canvas width
margin: 50, // Update margins
})
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.
