Lately I’ve been experimenting with data visualisation and somehow, there was not a lot of information on building d3js dashboards with react! Most of the documentation was outdated or did not have basic features like how to deal with responsiveness.
You can base everything off the repo I have provided :) Just fork it or build off it — https://github.com/neosh11/VA2
Note, I have used pure javascript here to keep it beginner friendly, but feel free to use typescript (I actually prefer this)
However the overarching principles are as follows:
- Define a parent container with a useRef in order get it’s width and height.
- Define you svg.
- Use d3js to add to your svg and ensure you use a hook to update it whenever the parent container’s values change.
- Remember to cache all your data — I would recommend dexie.js + context to handle the data inside the app for simplicity.
Specs
Live Demo: https://va-2.vercel.app/
Code: https://github.com/neosh11/VA2
Dataset: https://www.kaggle.com/datasets/jahaidulislam/car-specification-dataset-1945-2020
Tools:
- Nextjs
- Tailwindcss
- dexie js to cache the 28mb file in the browser
- d3 for visualizations
