Add example of canvas to png data loader

[palewire]

I propose adding this example, which shows how you can use Node.JS in a data loader to serve a canvas map as a PNG. I currently use this pattern to render large amounts of data in lightweight static files.

I used the official d3 example of how to make a canvas map to put together this demo.

[Fil]

Thanks, this seems useful. A few remarks as I read the code.

[Fil]

should this be us-map.png.js instead? not really “data”, maybe, if it's already a baked-in visualization?

[palewire]

I'm agnostic on the approach. I put it there because I saw a similar path in the Python to PNG example. If you want me to change it here, I'm happy to do so.

[Fil]

yeah I don't know… we can leave it like this for now :)

[Fil]

I think we also want to use double resolution (for retina screens) — this is hidden in DOM.context2d in observable notebooks.

[palewire]

I think we also want to use double resolution (for retina screens) — this is hidden in DOM.context2d in observable notebooks.

What method would you like to see used for this?

[Fil]

I've added upscaling in 04eb615
this PR looks good to me, continuing at #1514.

[Fil]

merged as 661e0ff

thanks!

[palewire]

Great. Would you want a companion example that loaded a d3 SVG graphic into a PNG?

[Fil]

I'm not sure what's best. I've already prepared a resource (but not shared as an "example" yet) explaining how to do SSR in png and svg with Plot:
https://observablehq.observablehq.cloud/pangea/support/becker-barley-ssr

I wonder if it makes sense to create one "example" for each case, or if we shouldn't instead make an example that shows the different techniques (that means 8 combinations of D3 v Plot, png v svg, and dark v light).

[palewire]

I'd defer to you all on the right presentation. My thing: Being able to render out big data-heavy graphics made with d3 into PNG is a very useful use case for your loaders in news publishing. Show it off!