New example: d3/canvas to png (#1514)

* Add canvas to png example
* scale up
* add a link in examples/README

---------

Co-authored-by: palewire <[email protected]>

Author: Fil

examples/README.md

@@ -45,39 +45,40 @@
 
 ### Charts
 
-- [`geotiff`](https://observablehq.observablehq.cloud/framework-example-geotiff/) - Parsing GeoTIFF with geotiff.js, then visualizing with Observable Plot
-- [`netcdf`](https://observablehq.observablehq.cloud/framework-example-netcdf/) - Parsing NetCDF with `netcdfjs`, then visualizing with Observable Plot
+- [`geotiff`](https://observablehq.observablehq.cloud/framework-example-geotiff/) - Parse GeoTIFF with geotiff.js, then visualize with Observable Plot
+- [`netcdf`](https://observablehq.observablehq.cloud/framework-example-netcdf/) - Parse NetCDF with `netcdfjs`, then visualize with Observable Plot
 - [`vega-dark`](https://observablehq.observablehq.cloud/framework-example-vega-dark/) - Responsive dark mode in Vega-Lite
 - [`vega-responsive`](https://observablehq.observablehq.cloud/framework-example-vega-responsive/) - Responsive width in Vega-Lite using ResizeObserver
 
 ### Data loaders
 
-- [`loader-airtable`](https://observablehq.observablehq.cloud/framework-example-loader-airtable/) - Loading data from Airtable
-- [`loader-arrow`](https://observablehq.observablehq.cloud/framework-example-loader-arrow/) - Generating Apache Arrow IPC files
-- [`loader-census`](https://observablehq.observablehq.cloud/framework-example-loader-census/) - Loading and transform shapefiles from the U.S. Census Bureau
-- [`loader-databricks`](https://observablehq.observablehq.cloud/framework-example-loader-databricks/) - Loading data from Databricks
-- [`loader-duckdb`](https://observablehq.observablehq.cloud/framework-example-loader-duckdb/) - Processing data with DuckDB
-- [`loader-elasticsearch`](https://observablehq.observablehq.cloud/framework-example-loader-elasticsearch/) - Loading data from Elasticsearch
-- [`loader-github`](https://observablehq.observablehq.cloud/framework-example-loader-github/) - Loading data from GitHub
-- [`loader-google-analytics`](https://observablehq.observablehq.cloud/framework-example-loader-google-analytics/) - Loading data from Google Analytics
-- [`loader-julia-to-txt`](https://observablehq.observablehq.cloud/framework-example-loader-julia-to-txt/) - Generating TXT from Julia
-- [`loader-parquet`](https://observablehq.observablehq.cloud/framework-example-loader-parquet/) - Generating Apache Parquet files
-- [`loader-postgres`](https://observablehq.observablehq.cloud/framework-example-loader-postgres/) - Loading data from PostgreSQL
-- [`loader-python-to-csv`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-csv/) - Generating CSV from Python
-- [`loader-python-to-png`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-png/) - Generating PNG from Python
-- [`loader-python-to-zip`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-zip/) - Generating ZIP from Python
-- [`loader-r-to-csv`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-csv/) - Generating CSV from R
-- [`loader-r-to-jpeg`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-jpeg/) - Generating JPEG from R
-- [`loader-r-to-json`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-json/) - Generating JSON from R
-- [`loader-rust-to-json`](https://observablehq.observablehq.cloud/framework-example-loader-rust-to-json/) - Generating JSON from Rust
-- [`loader-snowflake`](https://observablehq.observablehq.cloud/framework-example-loader-snowflake/) - Loading data from Snowflake
-- [`netcdf-contours`](https://observablehq.observablehq.cloud/framework-example-netcdf-contours/) - Converting NetCDF to GeoJSON with `netcdfjs` and `d3-geo-voronoi`
+- [`loader-airtable`](https://observablehq.observablehq.cloud/framework-example-loader-airtable/) - Load data from Airtable
+- [`loader-arrow`](https://observablehq.observablehq.cloud/framework-example-loader-arrow/) - Generate Apache Arrow IPC files
+- [`loader-canvas-to-png`](https://observablehq.observablehq.cloud/framework-example-loader-canvas-to-png/) - Generate PNG using node-canvas
+- [`loader-census`](https://observablehq.observablehq.cloud/framework-example-loader-census/) - Load and transform shapefiles from the U.S. Census Bureau
+- [`loader-databricks`](https://observablehq.observablehq.cloud/framework-example-loader-databricks/) - Load data from Databricks
+- [`loader-duckdb`](https://observablehq.observablehq.cloud/framework-example-loader-duckdb/) - Process data with DuckDB
+- [`loader-elasticsearch`](https://observablehq.observablehq.cloud/framework-example-loader-elasticsearch/) - Load data from Elasticsearch
+- [`loader-github`](https://observablehq.observablehq.cloud/framework-example-loader-github/) - Load data from GitHub
+- [`loader-google-analytics`](https://observablehq.observablehq.cloud/framework-example-loader-google-analytics/) - Load data from Google Analytics
+- [`loader-julia-to-txt`](https://observablehq.observablehq.cloud/framework-example-loader-julia-to-txt/) - Generate TXT from Julia
+- [`loader-parquet`](https://observablehq.observablehq.cloud/framework-example-loader-parquet/) - Generat Apache Parquet files
+- [`loader-postgres`](https://observablehq.observablehq.cloud/framework-example-loader-postgres/) - Load data from PostgreSQL
+- [`loader-python-to-csv`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-csv/) - Generate CSV from Python
+- [`loader-python-to-png`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-png/) - Generate PNG from Python
+- [`loader-python-to-zip`](https://observablehq.observablehq.cloud/framework-example-loader-python-to-zip/) - Generate ZIP from Python
+- [`loader-r-to-csv`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-csv/) - Generate CSV from R
+- [`loader-r-to-jpeg`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-jpeg/) - Generate JPEG from R
+- [`loader-r-to-json`](https://observablehq.observablehq.cloud/framework-example-loader-r-to-json/) - Generate JSON from R
+- [`loader-rust-to-json`](https://observablehq.observablehq.cloud/framework-example-loader-rust-to-json/) - Generate JSON from Rust
+- [`loader-snowflake`](https://observablehq.observablehq.cloud/framework-example-loader-snowflake/) - Load data from Snowflake
+- [`netcdf-contours`](https://observablehq.observablehq.cloud/framework-example-netcdf-contours/) - Convert NetCDF to GeoJSON with `netcdfjs` and `d3-geo-voronoi`
 
 ### Inputs
 
 - [`codemirror`](https://observablehq.observablehq.cloud/framework-example-codemirror/) - A text input powered by CodeMirror
 - [`custom-input-2d`](https://observablehq.observablehq.cloud/framework-example-custom-input-2d/) - A custom 2D input with bidirectional binding
-- [`input-select-file`](https://observablehq.observablehq.cloud/framework-example-input-select-file/) - Selecting a file from a drop-down menu
+- [`input-select-file`](https://observablehq.observablehq.cloud/framework-example-input-select-file/) - Select a file from a drop-down menu
 
 ### Markdown
 
@@ -87,8 +88,8 @@
 
 ### Other
 
-- [`chess`](https://observablehq.observablehq.cloud/framework-example-chess/) - Loading Zip data from FIDE; creating a bump chart with Observable Plot
-- [`custom-stylesheet`](https://observablehq.observablehq.cloud/framework-example-custom-stylesheet/) - Defining a custom stylesheet (custom theme)
+- [`chess`](https://observablehq.observablehq.cloud/framework-example-chess/) - Load Zip data from FIDE; create a bump chart with Observable Plot
+- [`custom-stylesheet`](https://observablehq.observablehq.cloud/framework-example-custom-stylesheet/) - Define a custom stylesheet (custom theme)
 - [`google-analytics`](https://observablehq.observablehq.cloud/framework-example-google-analytics/) - A Google Analytics dashboard with numbers and charts
 - [`hello-world`](https://observablehq.observablehq.cloud/framework-example-hello-world/) - A minimal Framework project
 - [`intersection-observer`](https://observablehq.observablehq.cloud/framework-example-intersection-observer/) - Scrollytelling with IntersectionObserver

examples/loader-canvas-to-png/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+/dist/
+node_modules/
+yarn-error.log
+.venv

examples/loader-canvas-to-png/README.md

@@ -0,0 +1,7 @@
+[Framework examples →](../)
+
+# Data loader to generate PNG from canvas
+
+View live: <https://observablehq.observablehq.cloud/framework-example-loader-canvas-to-png/>
+
+This Observable Framework example demonstrates how to write a Node.js data loader that creates a map using [node-canvas](https://github.com/Automattic/node-canvas) and D3, then writes the map to standard out as a PNG. The data loader lives in [`src/data/us-map.png.js`](./src/data/us-map.png.js).

examples/loader-canvas-to-png/observablehq.config.js

@@ -0,0 +1,3 @@
+export default {
+  root: "src"
+};

examples/loader-canvas-to-png/package.json

@@ -0,0 +1,23 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf src/.observablehq/cache",
+    "build": "rimraf dist && observable build",
+    "dev": "observable preview",
+    "deploy": "observable deploy",
+    "observable": "observable"
+  },
+  "dependencies": {
+    "@observablehq/framework": "latest",
+    "topojson-client": "^3.0.0",
+    "d3": "^7.0.0",
+    "canvas": "^2.8.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

examples/loader-canvas-to-png/src/.gitignore

@@ -0,0 +1 @@
+/.observablehq/cache/

examples/loader-canvas-to-png/src/data/us-map.png.js

@@ -0,0 +1,48 @@
+import {createCanvas} from "canvas";
+import {geoPath} from "d3";
+import * as topojson from "topojson-client";
+
+// Get the map file from the US Atlas package
+// https://github.com/topojson/us-atlas
+const url = "https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json";
+const us = await fetch(url).then(response => response.json());
+
+// Create and configure a canvas
+const width = 975;
+const height = 610;
+const canvas = createCanvas(width * 2, height * 2);
+const context = canvas.getContext("2d");
+context.scale(2, 2);
+
+// https://observablehq.com/@d3/u-s-map-canvas
+context.lineJoin = "round";
+context.lineCap = "round";
+// Use the null projection, since coordinates in US Atlas are already projected.
+const path = geoPath(null, context);
+
+context.fillStyle = "#fff";
+context.fillRect(0, 0, width, height);
+
+context.beginPath();
+path(topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0)));
+context.lineWidth = 0.5;
+context.strokeStyle = "#aaa";
+context.stroke();
+
+context.beginPath();
+path(topojson.mesh(us, us.objects.states, (a, b) => a !== b));
+context.lineWidth = 0.5;
+context.strokeStyle = "#000";
+context.stroke();
+
+context.beginPath();
+path(topojson.feature(us, us.objects.nation));
+context.lineWidth = 1;
+context.strokeStyle = "#000";
+context.stroke();
+
+// Write the canvas to a PNG buffer
+const buffer = canvas.toBuffer("image/png");
+
+// Pipe the buffer to process.stdout
+process.stdout.write(buffer);

examples/loader-canvas-to-png/src/index.md

@@ -0,0 +1,70 @@
+# Data loader to generate PNG from canvas
+
+Here’s a Node.js data loader that creates a map using [node-canvas](https://github.com/Automattic/node-canvas) and D3, then writes the map to standard out as a PNG.
+
+This pattern can be used to render maps that require with a large amount of data as lightweight static files.
+
+```js run=false
+import {createCanvas} from "canvas";
+import {geoPath} from "d3";
+import * as topojson from "topojson-client";
+
+// Get the map file from the US Atlas package
+// https://github.com/topojson/us-atlas
+const url = "https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json";
+const us = await fetch(url).then(response => response.json());
+
+// Create and configure a canvas
+const width = 975;
+const height = 610;
+const canvas = createCanvas(width * 2, height * 2);
+const context = canvas.getContext("2d");
+context.scale(2, 2);
+
+// https://observablehq.com/@d3/u-s-map-canvas
+context.lineJoin = "round";
+context.lineCap = "round";
+// Use the null projection, since coordinates in US Atlas are already projected.
+const path = geoPath(null, context);
+
+context.fillStyle = "#fff";
+context.fillRect(0, 0, width, height);
+
+context.beginPath();
+path(topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0)));
+context.lineWidth = 0.5;
+context.strokeStyle = "#aaa";
+context.stroke();
+
+context.beginPath();
+path(topojson.mesh(us, us.objects.states, (a, b) => a !== b));
+context.lineWidth = 0.5;
+context.strokeStyle = "#000";
+context.stroke();
+
+context.beginPath();
+path(topojson.feature(us, us.objects.nation));
+context.lineWidth = 1;
+context.strokeStyle = "#000";
+context.stroke();
+
+// Write the canvas to a PNG buffer
+const buffer = canvas.toBuffer("image/png");
+
+// Pipe the buffer to process.stdout
+process.stdout.write(buffer);
+```
+
+<div class="note">
+
+To run this data loader, you’ll need to add the `d3`, `topojson-client` and `canvas` libraries as dependencies with `npm add d3 topojson-client canvas` or `yarn add d3 topojson-client canvas`.
+
+</div>
+
+The above data loader lives in `data/us-map.png.js`, so we can access the image using `data/us-map.png`:
+
+```html run=false
+<img src="data/us-map.png" style="max-width: 975px;">
+```
+
+<img src="data/us-map.png" style="max-width: 975px;">