Public
Edited
Jan 5, 2024
Plot.plot({
y: {grid: true},
color: {legend: true},
marks: [
Plot.areaY(data1, {x: "x", y: "y", stroke: "z", fill: "z"}),
]
})
Plot.plot({
y: {grid: true},
color: {legend: true},
marks: [
Plot.areaY(data1, {x: "x", y: (d) => Math.max(0, d.y), stroke: "z", fill: "z", fillOpacity: 0.5}),
Plot.areaY(data1, {x: "x", y: (d) => Math.min(-0, d.y), stroke: "z", fill: "z", fillOpacity: 0.5}),
]
})
Plot.plot({
y: {grid: true},
color: {legend: true},
marks: [
Plot.areaY(data3, {x: "x", y: "y", stroke: "z", fill: "z", fillOpacity: 0.5}),
Plot.ruleY([0])
]
})
Plot.plot({
y: {grid: true},
color: {legend: true},
marks: [
Plot.areaY(data3, {x: "x", y: (d) => Math.max(0, d.y), stroke: "z", fill: "z", fillOpacity: 0.5}),
// This needs to be e.g. -0.00001 instead of just -0.0 to remove the bottom zig-zag lines.
Plot.areaY(data3, {x: "x", y: (d) => Math.min(-0.0, d.y), stroke: "z", fill: "z", fillOpacity: 0.5}),
Plot.ruleY([0])
]
})
data1 = FileAttachment("data1.csv").csv({typed: true})
data3 = FileAttachment("data3-fixed@1.csv").csv({typed: true})
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.
