Public
Edited
Nov 10, 2023
caDams
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof optionsTask1 = Inputs.form({
missingData: Inputs.toggle({label: "Include 'No data'", value: false}),
relativeProportion: Inputs.toggle({label: "Relative Proportion", value: true}),
})
viewof hazzardClass = Inputs.checkbox(["Low", "Significant", "High"], {
label: "Select Hazard Potential:",
unique: true,
value: ["Low", "Significant", "High"]
})
Plot.plot({
x: { type: "log", grid: true },
y: { type: "sequential", grid: true, domain: [1, 150000] },
width,
tip: true,
r: { range: [3, 30] },
color: {
type: "categorical",
domain: ["Low", "Significant", "High"],
range: ["hsl(141deg,49%,90%)",
"hsl(45deg,49%,66%)",
"hsl(3deg,59%,40%)"],
legend: true
},
marks: [
Plot.dot(caDams, {
x: "StorageAcreFeet",
type: "log",
y: "SurfaceAreaAcres",
tip: true,
fill: "HazardPotentialClassification",
opacity: 1,
r: "DrainageAreaSqMiles",
channels: { DamName: "DamName" }
}),
Plot.dot(
caDams.filter((d) =>
hazzardClass.includes(d.HazardPotentialClassification)
),
{
x: "StorageAcreFeet",
type: "log",
y: "SurfaceAreaAcres",
tip: true,
fill: "HazardPotentialClassification",
r: "DrainageAreaSqMiles",
channels: { DamName: "DamName" }
}
)
]
})
Plot.plot({
projection: { type: "mercator", domain: caCounties },
width: 1000,
height: 1000,
color: {
type: "categorical",
domain: ["Low", "Significant", "High"],
range: ["hsl(141deg,29%,90%)",
"hsl(45deg,49%,66%)",
"hsl(3deg,59%,40%)"],
legend: true
},
symbol: { domain: primaryPurposes, legend: true },
r: {
domain: d3.extent(caDams.map((d) => d.StorageAcreFeet)),
range: [3, 15]
},
marks: [
Plot.geo(caCounties, { stroke: "grey", strokeWidth: 0.9 }),
Plot.geo(caHydro, { stroke: "blue", strokeWidth: showRivers ? 0.3 : 0 }),
Plot.dot(
caDams.filter(
(d) =>
mapHazzardClass.includes(d.HazardPotentialClassification) &&
selectedPurposes.includes(d.PrimaryPurpose) &&
d.YearCompleted <= pickYear &&
d.StorageAcreFeet >= minStorage
),
{
x: "Longitude",
type: "log",
y: "Latitude",
tip: true,
fill: "HazardPotentialClassification",
// stroke: "black",
symbol: "PrimaryPurpose",
opacity: 0.5,
r: "StorageAcreFeet",
channels: { Dam_Name: "DamName", Year_Completed: "YearCompleted" }
}
)
]
})
dams = FileAttachment("californiaDams.csv").csv({typed: true})
caDams
Type SQL, then Shift-Enter. Ctrl-space for more options.
3110Modi.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
caDams
X
SurfaceAreaAcres
Y
DamName
Color
Purposes
Size
Purposes
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
width,
height: 17000,
marginTop: 50,
marginLeft: 100,
marginRight: 50,
marks: [
Plot.barX(caDams, {
x: "SurfaceAreaAcres",
y: "DamName",
fill: "Purposes",
r: "Purposes",
tip: true
}),
Plot.ruleX([0])
]
})
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.
