With D3, you can
- Create and scale fully responsive charts (your bar charts, histograms, line charts, scatterplots)
- Prototype intricate graphs (Sankey graphs, radar charts, and much more)
- Parse and clean up data
- Create wholly new and creative interactive experiences
D3’s biggest limitation
The learning curve with D3 is tricky because it is nested in another skill set — web development. This is where I hope this project finds some use.
Other than highlighting datasets around meaningful topics, I wanted to make a repo someone can use, easily clone, run, and start playing around with.
When learning D3 (and frontend in general), I struggled a lot with getting going with various starter repos, especially when React was starting to become more popular. (Eventually, we made this Currents dashboard!)marguerite.io/vue-d3-dataviz-starter
In this starter
So in here, we have
- Vue 3
- CSV imports
- Coordinate tooltips
- Voronoi tooltips
- Responsive layouts
- Color scales & interpolation
- Styled and unstyled charts
I plan to keep this open-sourced repo going and make little dataviz charts. Both unstyled and styled chart components are included for each chart type, so you can take just the bones and apply them to any other dataset with much less tinkering. 💀
For more D3 and dev resources, check out:
- Post: Set up a local dev environment and run a website in 10 minutes
- Resource: Everything in Amelia Wattenberger. She wrote the book on it!
If none of this has sold you on making graphs, you can delete all those components and use this repo as a Vue3 + Vite seed. I use this for my own site, plus some SSGing before production.
Using this starter
- Open the terminal and clone this repo:
- Go into that folder via terminal:
- Install the node packages listed in
- Run the vite server
- Head to http://localhost:3000/
- Average temperature anomaly mean time series
- Mass shootings