Plot.areaY(aapl, {
x: "date",
y2: "close",
fill: "steelblue"
}).plot()
Plot.areaY(temperatures, {
x: "date",
y1: "low",
y2: "high",
curve: "step",
fill: "steelblue"
}).plot()
Plot.plot({
marks: [
Plot.rect(weather, {
x: 'date',
y1: 'New York',
y2: 'San Francisco',
fill: d => d['New York'] < d['San Francisco'],
interval: d3.utcDay,
inset: inset
}),
Plot.line(weather, {
x: 'date',
y: 'New York',
curve: 'step'
}),
Plot.line(weather, {
x: 'date',
y: 'San Francisco',
curve: 'step',
stroke: "grey"
})
],
color: {
domain: [false, true],
range: ["#91bfdb", "#fc8d59"]
}
// for an alternative using clip-paths, see https://observablehq.com/@fil/plot-difference-chart
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
marks:[
Plot.areaY(aaplMissing, {
filter: d => !isNaN(d.close),
x: 'date',
y2: 'close',
fill: '#eee'
}),
Plot.areaY(aaplMissing, {
x: 'date',
y2: 'close',
fill: 'steelblue'
})
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
nice: true,
grid: true,
color: {
legend: true
},
facet: { data: mdata, y: "device" },
marks: [
Plot.frame(),
Plot.areaY(
mdata,
Plot.binX(
{ y1: "min", y2: "max", filter: null },
{
x: "timestamp",
thresholds: d3.utcMinute,
y: "temp",
fillOpacity: 0.2
}
)
),
Plot.dot(mdata, {
x: "timestamp",
y: "temp",
stroke: "sensor_id"
}),
Plot.line(
mdata,
Plot.binX(
{ y: "mean", filter: null },
{
x: "timestamp",
thresholds: d3.utcMinute,
y: "temp",
stroke: "sensor_id"
}
)
)
]
})
mdata = FileAttachment("data (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.
