2023 D3 Reactive Responsive skeleton

From Bitpost wiki
Revision as of 20:55, 4 March 2023 by M (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

I love D3 dearly. Recently the excellent examples from Mike Bostock have been somewhat obfuscated when they were migrated to Observables notebooks. After researching this problem, many of Mike Bostock's Observables examples are actually quite clean JavaScript. You just need a framework into which you can paste the example code.

You'll most likely want a modern JavaScript framework that gives you npm module support, page routing, etc. You'll probably want responsiveness, which the examples don't always include. You'll want hot-reloading. You'll also benefit from build tooling for tree shaking, polyfill, etc.

Here's a skeleton project I wrote that you allows you to cut and paste many Observables examples almost entirely as-is. The charts folder contains nine charts that were cut and pasted from Observables example code (with copyright attached). See the comments for details.

It is written with Vite + React. It is as simple as I could make it yet has all the basics. It follows the current best practices from Vite, React, Router, Bootstrap, etc docs.

NOTE: I left SSR out for now. I feel like SSR is not quite yet a standard, mature and simple core Vite feature. I'll definitely refactor this project once I feel comfortable with it. See:

https://vitejs.dev/guide/ssr.html
https://github.com/vitejs/awesome-vite#ssr