The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Advanced Data Viz Course
Edited
Jun 29, 2023
4 forks
5 stars
3
Insert cell
Insert cell
Insert cell
Insert cell
restaurant.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
marks: [Plot.lineY(restaurant, { x: "Date", y: "Sales", tip: true })],
y: {
domain: [0, 5300]
}
})
Insert cell
Insert cell
Insert cell
sales
select DATETRUNC('month', Date) as month, sum(Sales) as sales from sales
group by month
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(monthly, { x: "month", y: "sales", tip: true })
],
y: {
domain: [0, 160000]
},
marginLeft: 60
})
Insert cell
Insert cell
restaurant2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
sales
select DATETRUNC('month', Date) as month, sum(Sales) as sales from sales2
group by month
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(monthly, { x: "month", y: "sales", stroke: 'lightgray' }),
Plot.lineY(monthly2, { x: "month", y: "sales", tip: true })
],
y: {
domain: [0, 160000]
},
marginLeft: 60
})
Insert cell
Insert cell
Insert cell
minwage-adjusted.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
caption: "U.S. federal minimum wage, nominal dollars (blue) and inflation-adjusted 'real' May 2023 dollars (orange) ",
marks: [
Plot.lineY(minwage.filter(d => d.Date >= startDate),
{ x: "Date", y: "Nominal", stroke: 'steelblue', tip: true, curve: curve,
title: d => `${d.Month}/${d.Year}: $${d.Nominal.toFixed(2)} (nominal)`}),
Plot.lineY(minwage.filter(d => d.Date >= startDate),
{ x: "Date", y: "Adjusted", stroke: 'darkorange', tip: true,
title: d => `${d.Month}/${d.Year}: $${d.Adjusted.toFixed(2)} (adjusted)`})
],
width,
})
Insert cell
Insert cell
Insert cell
Plot.plot({
inset: 10,
grid: true,
x: {label: "Miles driven (per person-year) →"},
y: {label: "↑ Cost of gasoline ($ per gallon)"},
marks: [
Plot.line(driving, {x: "miles", y: "gas", curve: "catmull-rom", marker: true}),
Plot.text(driving, {filter: (d) => d.year % 5 === 0, x: "miles", y: "gas", text: (d) => `${d.year}`, dy: -8})
]
})
Insert cell
Insert cell
Insert cell
oneCity
X
temperature
Y
power
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
import {driving} from "@observablehq/plot-connected-scatterplot"
Insert cell
import {power_vs_temperature} from "@observablehq/guide-electricity"
Insert cell
oneCity = power_vs_temperature.filter(d => d.city === city)
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