monodata = FileAttachment("monoData@1.xlsx").xlsx()
monodata
monoYearly = monodata.sheet(0, { headers: true })
monoYearly
monoCombo = DuckDBClient.of({ timeline: monoTimeline, levels: monoYearly })
monoCombo
timeline
timeline
Type Table, then Shift-Enter. Ctrl-space for more options.
timeline
X
year
Y
diffPreDiversion
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.lineY(timeline, {
x: "year",
y: "diffPreDiversion",
stroke: "gray"
}),
Plot.ruleY([0], {
x1: 1941,
x2: 2017,
stroke: "red",
strokeDasharray: "5,2"
}),
Plot.tip([`1940 pre-diversion lake lvel: 6417 ft asl`], {x: 1970, y: 0, anchor: "bottom"}),
Plot.dot(timeline, {
x: "year",
y: "diffPreDiversion",
filter: (d) => d.event !== null,
r: 5,
fill: "steelblue",
stroke: "grey"
}),
Plot.tip(
timeline,
Plot.pointerX({
x: "year",
y: "diffPreDiversion",
title: (d) =>
d.detail == null
? `${d.year}\n\n${Math.abs(d.diffPreDiversion).toFixed(1)}m ${
d.diffPreDiversion < 0 ? "below" : "above"
} prediversion levels`
: `${d.year}\n\n${Math.abs(d.diffPreDiversion).toFixed(1)}m ${
d.diffPreDiversion < 0 ? "below" : "above"
} prediversion levels\n\n${d.detail}`
})
)
]
})
Plot.plot({
marks: [
Plot.areaY(timeline, {
x: "year",
y1: -50,
y2: "diffPreDiversion",
curve: "natural",
fill: "#d1e5ff",
filter: (d) => d.year >= 1930
}),
Plot.lineY(timeline, {
x: "year",
y: "diffPreDiversion",
stroke: "dimgray",
strokeWidth: 1,
filter: (d) => d.year >= 1930,
curve: "natural"
}),
Plot.ruleY([6392 - 6417], {
x1: 1994,
x2: 2017,
stroke: "coral",
strokeWidth: 2,
strokeDasharray: "4,3"
}),
Plot.ruleY([0], {
x1: 1941,
x2: 2017,
stroke: "#275bc4",
strokeWidth: 2,
strokeDasharray: "4,3"
}),
Plot.tip(
[
`Mono Lake level mandated by Decision D-1631 in 1994 (6,392 feet above sea level)`
],
{ x: 1994, y: 6392 - 6417, anchor: "bottom", stroke: "gainsboro" }
),
Plot.tip([`1940 (pre-diversion) level: 6,417 ft`], {
x: 1970,
y: 0,
anchor: "bottom",
stroke: "gainsboro"
}),
Plot.dot(timeline, {
x: "year",
y: "diffPreDiversion",
r: 4,
stroke: "#275bc4",
strokeWidth: 2,
fill: "dodgerblue",
filter: (d) => d.detail != null
}),
Plot.frame({ stroke: "gray" }),
Plot.tip(
timeline,
Plot.pointerX({
x: "year",
y: "diffPreDiversion",
title: (d) =>
d.detail == null
? `Year: ${d.year}\nChange from pre-diversion level: ${d3.format(
","
)(d.diffPreDiversion)} ft`
: `Year: ${d.year}\nChange from pre-diversion level: ${d3.format(
","
)(d.diffPreDiversion)} ft\n\n${d.detail}`,
stroke: "gainsboro",
opacity: 0.95
})
)
],
y: {
domain: [-50, 10],
ticks: 5,
label:
"Difference in lake level (feet) from pre-diversion level\n recorded in 1940 (6,417 feet above sea level)"
},
x: {
tickFormat: "Y",
domain: [1930, d3.max(monoYearly, (d) => d.year)],
label: null,
ticks: 10
},
height: 500,
width: 800,
margin: 30
})
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.
