The avatar for @mjbo
Max Bo
Software Engineer @ Canva, ex-Google | music, color theory, Australian democracy, situated software & generative art
Public
Talks
Edited
Sep 19, 2024
Paused
1 star
3
Talks
Data plane management
Intermediate data visualizationPerceptually uniform color models and their implicationsHello, protobuf.jsSome JavaScript features
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
duckDb = DuckDBClient.of({
})
Insert cell
duckDb.query(
`SELECT pickup_datetime FROM read_parquet("${REMOTE_URL}") LIMIT 10`
)
Insert cell
Insert cell
Insert cell
smaller_tripdata_1.parquet
SELECT epoch(pickup_datetime - request_datetime) as wait_time_seconds, request_datetime, pickup_datetime FROM smaller_tripdata_1 WHERE request_datetime < DATE '2023-07-01' + INTERVAL 7 DAY AND wait_time_seconds > 0;
Insert cell
Plot.plot({
width,
x: {
interval: "hour"
},
y: {
label: "Wait time (m)",
transform: (d) => d / 60,
domain: [0, 15]
},
color: {
scheme: "ylgnbu"
},
marks: [
Plot.lineY(
tripdata,
Plot.windowY(
{ k: 60 * 8, reduce: "p50", interval: "minute" },
{
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: "wait_time_seconds",
interval: "minute",
stroke: "black"
}
)
),
Plot.lineY(
tripdata,
Plot.windowY(
{ k: 60 * 8, reduce: "p90", interval: "minute" },
{
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: "wait_time_seconds",
interval: "minute",
stroke: "purple"
}
)
),
Plot.lineY(
tripdata,
Plot.windowY(
{ k: 60 * 8, reduce: "p95", interval: "minute" },
{
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: "wait_time_seconds",
interval: "minute",
stroke: "blue"
}
)
),
Plot.rect(
tripdata,
Plot.bin(
{ fill: "count" },
{
x: "request_datetime",
y: { thresholds: 3000, value: "wait_time_seconds" }
}
)
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
smaller_tripdata_1.parquet
SELECT
request_datetime, QUANTILE_CONT(epoch(pickup_datetime - request_datetime), [0.50, 0.90, 0.95, 0.99]) OVER (
ORDER BY "request_datetime" ASC
RANGE BETWEEN INTERVAL 4 HOUR PRECEDING
AND INTERVAL 4 HOUR FOLLOWING) AS pXX,
FROM smaller_tripdata_1
WHERE request_datetime < DATE '2023-07-01' + INTERVAL 7 DAY AND epoch(pickup_datetime - request_datetime) > 0
ORDER BY request_datetime;
Insert cell
Plot.plot({
title: "Taxi wait times in New York city, 2023-07-01 to 2023-07-07",
width,
x: {
interval: "hour"
},
y: {
label: "Wait time (m)",
transform: (d) => d / 60,
domain: [0, 15]
},
color: {
scheme: "ylgnbu"
},
marks: [
Plot.rect(
tripdata,
Plot.bin(
{ fill: "count" },
{
x: "request_datetime",
inset: 0,
y: { thresholds: 3000, value: "wait_time_seconds" }
}
)
),

Plot.lineY(windowed, {
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: (d) => d.pXX.get(0),
stroke: "black"
}),
Plot.text(
windowed,
Plot.selectMaxY({
x: "request_datetime",
y: (d) => d.pXX.get(0),
text: (d) => "p50",
fontSize: 16,
fill: "black",
stroke: "white"
})
),
Plot.lineY(windowed, {
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: (d) => d.pXX.get(1),
stroke: "purple"
}),
Plot.text(
windowed,
Plot.selectMaxY({
x: "request_datetime",
y: (d) => d.pXX.get(1),
text: (d) => "p90",
fontSize: 16,
fill: "purple",
stroke: "white"
})
),
Plot.lineY(windowed, {
strict: true,
curve: "catmull-rom",
x: "request_datetime",
y: (d) => d.pXX.get(2),
stroke: "blue"
}),
Plot.text(
windowed,
Plot.selectMaxY({
x: "request_datetime",
y: (d) => d.pXX.get(2),
text: (d) => "p95",
fontSize: 16,
fill: "blue",
stroke: "white"
})
)
]
})
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more