diff --git a/reports/2023-11-01-Observable.qmd b/reports/2023-11-01-Observable.qmd
new file mode 100644
index 0000000..8b5145e
--- /dev/null
+++ b/reports/2023-11-01-Observable.qmd
@@ -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")
+  );
+}
+```