Skip to content

Commit

Permalink
Add Observable Notebooks and Flight Data
Browse files Browse the repository at this point in the history
Visualization
  • Loading branch information
davidgasquez committed Nov 7, 2023
1 parent b3907c6 commit 8873236
Showing 1 changed file with 87 additions and 0 deletions.
87 changes: 87 additions & 0 deletions reports/2023-11-01-Observable.qmd
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")
);
}
```

0 comments on commit 8873236

Please sign in to comment.