-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Observable Notebooks and Flight Data
Visualization
- Loading branch information
1 parent
b3907c6
commit 8873236
Showing
1 changed file
with
87 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
--- | ||
title: "Observable Notebooks" | ||
date: 2023-01-01 | ||
author: "David Gasquez" | ||
format: | ||
html: | ||
code-tools: true | ||
toc: true | ||
--- | ||
|
||
Quarto is able to run Observable Notebooks. Observable is able to run DuckDB in the browser. | ||
|
||
Let's showcase it! | ||
|
||
|
||
```{ojs} | ||
energydb = DuckDBClient.of({ | ||
energy: FileAttachment("https://raw.githubusercontent.com/datonic/spain-energy-demand/main/data/spain-energy-demand.csv") | ||
}) | ||
``` | ||
|
||
```{ojs} | ||
Inputs.table(energydb.query("select * from energy order by datetime desc limit 10")) | ||
``` | ||
|
||
```{ojs} | ||
monthly = energydb.sql`select date_part('month', datetime) as t, avg(value) / 1000 as v from energy group by 1 order by 1 desc` | ||
Plot.plot({ | ||
grid: true, | ||
marks: [ | ||
Plot.lineY(monthly, { | ||
x: "t", | ||
y: "v" | ||
}), | ||
] | ||
}) | ||
``` | ||
|
||
Voila! | ||
|
||
## Plotting 10 Million Flights | ||
|
||
```{ojs} | ||
vg = { | ||
const vg = await import('https://cdn.jsdelivr.net/npm/@uwdata/vgplot/+esm'); | ||
const wasm = await vg.wasmConnector(); | ||
vg.coordinator().databaseConnector(wasm); | ||
return vg; | ||
} | ||
viewof flights = { | ||
// load flights data from external parquet file | ||
await vg.coordinator().exec(`CREATE TABLE IF NOT EXISTS flights10m AS | ||
SELECT | ||
GREATEST(-60, LEAST(ARR_DELAY, 180))::DOUBLE AS delay, | ||
DISTANCE AS distance, | ||
DEP_TIME AS time | ||
FROM 'https://uwdata.github.io/mosaic-datasets/data/flights-10m.parquet'`); | ||
// create a selection with crossfilter resolution | ||
const brush = vg.Selection.crossfilter(); | ||
// helper method to generate a binned plot filtered by brush | ||
// a plot contains a rectY mark for a histogram, as well as | ||
// an intervalX interactor to populate the brush selection | ||
const makePlot = column => vg.plot( | ||
vg.rectY( | ||
vg.from("flights10m", { filterBy: brush }), // data set and filter selection | ||
{ x: vg.bin(column), y: vg.count(), fill: "steelblue", inset: 0.5 } | ||
), | ||
vg.intervalX({ as: brush }), // create an interval selection brush | ||
vg.xDomain(vg.Fixed), // don't change the x-axis domain across updates | ||
vg.marginLeft(75), | ||
vg.width(600), | ||
vg.height(200) | ||
); | ||
// generate dashboard with three linked histograms | ||
return vg.vconcat( | ||
makePlot("delay"), | ||
makePlot("time"), | ||
makePlot("distance") | ||
); | ||
} | ||
``` |