D3aday.dev was borne out of a desire to get better at data visualizations for the web. The best way to get better at anything, I think, is through intentional practice. And the best way to practice is to do it a little bit each day. With an emphasis on “a little bit.” Ten minutes a day is better than five. But five minutes a day is better than zero. And I’ve found that when I keep my time commitments short, I tend to be much more successful at sticking to them.

My tool of choice for data visualizations for the web is D3.js. The problem with D3, though, is that it’s hard. There are numerous sites with example D3.js code, but many of the examples tend to be geared towards intermediate-to-advanced coders. And I think there’s always room to add to the body of knowledge available for folks who are learning it and using it. So while my first goal in creating this project was to practice using D3 every day, my second goal was to share what I learned and provide a structure for others to practice with too.

That said, this is not intended to be an introduction to D3, or to JavaScript. The exercises assume you have a base level of knowledge around both. If you’ve gotten through a beginners’ course or set of tutorials, and you’re ready for more, you’re in the right place.

For almost every exercise, the starting point is an existing data visualization to replicate, in whole or in part. Sometimes the goal is just to replicate an interesting feature. Sometimes the starting point is a previous exercise. Sometimes the starting point isn’t a visualization at all, but a work of art or artifact from the physical world. Inspiration can come from anywhere, if you’re open to it.

The three loose guidelines applied to each exercise are as follows:

  1. Build a version of the inspiration viz, simplifying if necessary to keep it relatively quick
  2. Use only vanilla HTML, CSS, and JavaScript, as well as D3.js (I used v.5.0)
  3. You shouldn’t have to be concerned about data-gathering - it’s provided for you

I’d love for you to give them a try!

Nick Frazier