Why work with no data?

In my typical data visualization process, I would form the question, collect and clean the data, explore data trends and anomalies, and then think of ways to communicate data effectively and creatively. It’s a long process with many dead ends, especially when wanting to tell something not told before. If I wanted to get better at the coding aspect, then I wasn’t getting enough practice…

I found a particular post by Amelia Wattenberger where she created 1 sketch per day using Canvas using randomly generated data. This was a great exercise for me to copy (minus the once per day) because I could focus on just a few things, like exploring a graphics library or drawing a single object, without letting my original scope explode like it does every other time.

Project Goals

I had a few goals while starting this project.

1. Start making responsive web design.
2. Start using canvas.
3. Pick up a few graphics libraries.

Knowing Responsive Web Design is not really needed for my personal projects so far given most people view on desktop, but I think it’s a nice-to-have for “when the time comes” or if I want to eventually enter a visualization contest that requires the deliverable to be responsive. I really liked Nadieh Bremer’s guide on how and when to use responsive design, which helped me get started. For my Random Sketches project, I used media queries and a resize function in javascript that would help me resize the Canvas.

Knowing Canvas is really important to me because it unlocks the ability to use more graphics libraries and it actually handles large datasets better than D3.js can. Canvas is based on pixels whereas D3.js is based on the DOM, so if I want to animate 1,000 dots on my screen then my page would lag with 1,000 elements in the DOM if using D3.js. Personally, I really like using D3.js more than Canvas because it’s been easier to manipulate objects, so I would default to D3.js unless there are performance issues or drawing limitations.

Knowing graphics libraries help add style to visualizations but aren’t that necessary. Up until this point, I have been using pure SVG and its filters, which actually have a good amount of options. My first GL was Rough.js which I found when reading The Design Process of “Why do Cats & Dogs…?", again by Nadieh Bremer.

Besides the 3 goals I mentioned, I learned a lot more! Doing animations/interpolations and exploring pure generative art are some learnings just my first 5 sketches. ᕕ( ᐛ )ᕗ