Public
Edited
Nov 5, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
caDams
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Plot.plot({
color: { legend: true},
marks: [
Plot.rectY(
caDams,
Plot.binX(
{ y: "count" },
{ x: "YearCompleted", fill: "ConditionAssessment", tip: { format: { x: ".0f"} }, interval:10, format: {x: (d) => d.toFixed(2)}}
)
),
Plot.ruleY([0]),
Plot.tip(
caDams,
Plot.pointer({
x: "YearCompleted",
y: "count"
})
)
],
x: { tickFormat: ".0f", label:"Year"},
y: { label:"Number of Dams in California"},
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(caDams, {
x: "SurfaceAreaAcres",
y: "StorageAcreFeet",
fill: (d) =>
pickHazardPotentialClassification === "Select All"
? d.HazardPotentialClassification
: d.HazardPotentialClassification ===
pickHazardPotentialClassification
? pickHazardPotentialClassification
: "gray",
r: "DrainageAreaSqMiles"
}),
Plot.tip(
caDams,
Plot.pointer({
x: "SurfaceAreaAcres",
y: "StorageAcreFeet",
tip: true,
channels: {
DamName: "DamName",
OwnerTypes:"OwnerTypes",
PrimaryPurpose:"PrimaryPurpose"
}
})
)
],
marginLeft: 60,
marginRight: 60,
x: { type: "log" },
y: { type: "log" },
color: {
legend: true,
domain: ["Low", "Significant", "High"],
range: ["green", "orange", "red"]
}
})
Insert cell
Insert cell
Plot.plot({
projection: { type: "mercator", domain: caCounties },
marks: [
Plot.geo(caCounties, { fill: "#ccc", stroke: "#fff" }),
Plot.dot(filterDams, {
x: "Longitude",
y: "Latitude",
r:"SurfaceAreaAcres",
fill: "OwnerTypes",
stroke:"#fff",
tip: true,
channels: {
DamName: "DamName",
OwnerTypes: "OwnerTypes",
PrimaryPurpose: "PrimaryPurpose",
YearCompleted:"YearCompleted"
},
tip: { format: { x: null, y:null, YearCompleted: ".0f"} }
})
],
color:{legend: true}
})
Insert cell
filterDams= caDams.filter((d) => d.PrimaryPurpose === "Water Supply")
Insert cell
Insert cell
Insert cell
Insert cell
dams = FileAttachment("californiaDams.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell

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.
Learn more