The avatar for @soma
Soma Maroju
Public
Edited
Oct 26, 2023
2
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,
domain: ["Poor", "Unsatisfactory", "No data", "Satisfactory", "Fair"],
scheme: "RdYlGn"
},
marks: [
Plot.rectY(
caDams,
Plot.binX(
{ y: "count" },
{
x: "YearCompleted",
y: "DamName",
interval: 10,
fill: "ConditionAssessment",
tip: true
// sort: ["Poor", "Unsatisfactory", "No data", "Satisfactory", "Fair"]
}
)
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
dams = FileAttachment("californiaDams.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Plot.plot({ projection: "equal-earth", marks: [Plot.geo(caCounties)] })
Insert cell
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(caCounties).addTo(map);
map.fitBounds(layer.getBounds(), { maxZoom: 20 });
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
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