The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Dec 20, 2023
Paused
11 forks
Importers
28 stars
chart = Plot.plot({
width: 928,
height: 550,
x: { inset: 4 },
y: { grid: true, label: "temperature (°F)" },
color: { scheme: "RdYlBu", label: "colder" },
marks: [
Plot.differenceY(weather, {
x: "date",
y1: "New York",
y2: "San Francisco",
curve: "step-after",
positiveFill: () => "NY",
negativeFill: () => "SF",
tip: true
}),
Plot.text(
weather,
Plot.selectMaxY({
x: "date",
y: "New York",
text: () => "New York",
dy: -6
})
),
Plot.text(weather, {
...Plot.selectMaxY({
x: "date",
y: "New York"
}),
y: "San Francisco",
text: () => "San Francisco",
dy: 13
}),
Plot.text(
weather,
Plot.selectMinY({
x: "date",
y: "New York",
text: () => "New York",
textAnchor: "start",
dy: -10,
dx: 6
})
),
Plot.text(weather, {
...Plot.selectMinY({
x: "date",
y: "New York",
text: () => "San Francisco"
}),
y: "San Francisco",
dy: -40
})
]
})
weather = FileAttachment("weather.tsv").tsv({typed: true})
.then(l => l.map(d => ({...d, date: d3.utcParse("%Y%m%d")(`${d.date}`)})))
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.
