2023 D3 Reactive Responsive skeleton: Difference between revisions
(Created page with "I love D3 dearly. Recently the excellent examples from Mike Bostock have been somewhat obfuscated when they were migrated to Observables notebooks. After researching [https:...") |
No edit summary |
||
| Line 3: | Line 3: | ||
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. | 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. | [https://bitpost.com/news/2023/2023-d3-reactive-responsive-skeleton/ 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. | 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. | ||
Latest revision as of 20:55, 4 March 2023
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