Public
Edited
Dec 5
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data
X
pickup_datetime
Y
tip_percentage
Color
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
aqDf.view()
Insert cell
Insert cell
Insert cell
Insert cell
aqDfByHour = aqDf
.groupby("hour")
.rollup({ trips: (d) => op.mean(d.trip_count) })
Insert cell
Plot.plot({
marginLeft: 50,
x: {
interval: 1,
label: "Hour number"
},
marks: [
Plot.barY(
aqDf.groupby("hour").rollup({ trips: (d) => op.mean(d.trip_count) }),
{
y: "trips",
x: "hour",
fill: "blue",
fillOpacity: 0.2
}
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Plot.plot({
marginLeft: 50,
x: {
interval: 1,
label: "Hour number"
},
y: {
label: "Average Temperature (°C)"
},
marks: [
Plot.barY(
aqDf
.groupby("hour")
.rollup({ temperature: (d) => op.mean(d.temperature) }),
{
y: "temperature",
x: "hour",
fill: "blue",
fillOpacity: 0.2
}
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
aqDfTemp = aqDf.groupby("date").rollup({
minTemp: (d) => op.min(d.temperature),
maxTemp: (d) => op.max(d.temperature)
})
Insert cell
Plot.plot({
marginLeft: 50,
x: {
interval: 1,
label: "Day"
},
y: {
label: "Temperature (°C)"
},
marks: [
Plot.lineY(aqDfTemp, {
y: "maxTemp",
x: "date"
}),
Plot.lineY(aqDfTemp, {
y: "minTemp",
x: "date"
}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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