caDams
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: { label: "Decade completed" },
y: { label: "Dams completed by condition" },
color: {
legend: true,
type: "ordinal",
range: ["red", "orange", "lightgrey", "blue", "green"],
domain: ["Unsatisfactory", "Poor", "No data", "Fair", "Satisfactory"]
},
marks: [
Plot.rectY(
caDams,
Plot.binX(
{ y: "count" },
{
x: "YearCompleted",
interval: 10,
fill: "ConditionAssessment",
tip: true
}
)
),
Plot.ruleY([0]),
Plot.ruleX([1917], { stroke: "grey" }),
Plot.tip(
[
"The Flood Act of 1917 was the first signed by Congress to control floods on around the Mississippi, Ohio, Missouri and other rivers in the Northeast."
],
{ x: 1917, y: 180, dy: 3, anchor: "right" }
),
Plot.ruleX([1936], { stroke: "grey" }),
Plot.tip(
[
"The Hoover Dam was constructed between 1931 and 1936 during the Great Depression and was dedicated on September 30, 1935, by President Franklin D. Roosevelt."
],
{ x: 1936, y: 240, dy: 3, anchor: "right" }
)
]
})
Plot.plot({
x: { type: "log" },
y: { type: "log" },
color: {
legend: true,
range: (domainColors) => {
console.log(domainColors);
const colorValues = ["blue", "orange", "red"];
const colorFiltered = [];
domainColors.forEach((c, i) => {
colorFiltered.push(
hazardRadio == "all" || hazardRadio == c
? colorValues[i]
: "lightgrey"
);
});
return colorFiltered;
},
domain: ["Low", "Significant", "High"]
},
marks: [
Plot.dot(caDams, {
x: "StorageAcreFeet",
y: "SurfaceAreaAcres",
stroke: "HazardPotentialClassification",
r: "DrainageAreaSqMiles",
tip: {
format: {
StorageAcreFeet: true,
SurfaceAreaAcres: true,
DrainageAreaSqMiles: true,
HazardPotentialClassification: null,
name: true,
stroke: false,
x: false,
y: false,
r: false
}
},
channels: {
name: {
value: "DamName",
label: "Name"
},
storage: {
value: (d) => `${d3.format(",d")(d.StorageAcreFeet)} acre feet`,
label: "Storage"
},
surface: {
value: (d) => `${d3.format(",d")(d.SurfaceAreaAcres)} acres`,
label: "Surface"
},
drainage: {
value: (d) => `${d3.format(",d")(d.DrainageAreaSqMiles)} sq miles`,
label: "Drainage"
},
hazard: {
value: "HazardPotentialClassification",
label: "Hazard potential"
}
}
})
]
})
Plot.plot({
projection: { type: "mercator", domain: caCounties },
//r: { transform: (a) => Math.sqrt(a / 4046.86 / Math.PI) }, //area to radius
r: {
legend: true
},
color: {
legend: true,
range: (domainColors) => {
console.log(domainColors);
const colorValues = ["blue", "orange", "red"];
const colorFiltered = [];
domainColors.forEach((c, i) => {
colorFiltered.push(
hazardRadio2 == "all" || hazardRadio2 == c
? colorValues[i]
: "lightgrey"
);
});
return colorFiltered;
},
domain: ["Low", "Significant", "High"]
},
marks: [
Plot.geo(caCounties, {
title: (d) => `${d.properties.name}`,
tip: true,
stroke: "lightgrey"
}),
Plot.dot(caDams, {
r: "SurfaceAreaAcres",
opacity: (d) => {
return d.YearCompleted >= completedInterval[0] &&
d.YearCompleted <= completedInterval[1]
? 0.8
: 0;
},
stroke: "HazardPotentialClassification",
fillOpacity: 0.2,
x: "Longitude",
y: "Latitude",
tip: {
format: {
StorageAcreFeet: true,
SurfaceAreaAcres: true,
DrainageAreaSqMiles: true,
HazardPotentialClassification: true,
YearCompleted: true,
name: true,
stroke: false,
x: false,
y: false,
r: false
}
},
channels: {
name: {
value: "DamName",
label: "Name"
},
storage: {
value: (d) => `${d3.format(",d")(d.StorageAcreFeet)} acre feet`,
label: "Storage"
},
surface: {
value: (d) => `${d3.format(",d")(d.SurfaceAreaAcres)} acres`,
label: "Surface"
},
drainage: {
value: (d) => `${d3.format(",d")(d.DrainageAreaSqMiles)} sq miles`,
label: "Drainage"
},
hazard: {
value: "HazardPotentialClassification",
label: "Hazard potential"
},
completed: {
value: (d) => d3.format("d")(d.YearCompleted),
label: "Completed"
}
}
})
]
})
completionYears = [
...new Set(caDams.map((d) => d.YearCompleted)).values()
].sort()
dams = FileAttachment("californiaDams.csv").csv({typed: true})
import { interval } from "@mootari/range-slider"
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.
