Visualization
I visualized Data Visualization Challenges and Inspirations with data from Data Visualization Society's 2023 State of the Industry survey. My entry received first place in the competition for the Explanatory category.
D3.js
I moved up! 2 years ago, I participated in the same challenge and got 3rd place. Based on the feedback I received from the judges, such as using more contrasting colors and enlarging my font size, I submitted my work knowing that it was much friendlier to read. Compared to my previous work, I drastically polished and simplified my visuals, and I found a better balance between how the audience would react and what design choices I wanted.
The results came back 2 months later, and my heart did skip a few beats when the “first place” email hit my inbox. I felt like I fixed their critique - their 2 or 3 sentences that pointed out the obvious went a really long way. I felt more validated for the panel to judge my work, which was a way of seeing my improvement.
With the way I self-taught D3.js, I never used npm which is a package manager for javascript. I always did a quick search online for a minified d3.js script, manually downloaded it, then embedded it with <script> in my HTML file. But with this project, I really wanted to use the word cloud… and I ran into versioning issues. I couldn’t salvage my work because the version of d3.js I was using was so old and the syntax across versions were pretty different. The word cloud was unusable with my old d3.js version. It was disastrous.
I needed a quick way to switch my project, but I was not good at navigating the unknowns of javascript. I looked to the Observable framework because it took those software engineering principles of environment management (something I regularly used with python but struggled in getting started with javascript) and made it easier to use for data people. I did not fully use the framework as much as I wanted to, such as a dashboard features itself, but the setup process saved me a lot of time from not having to start from scratch during a time crunch. Next time though, maybe the training wheels come off!
I always knew that steppers were easier to implement than scrollers. With steppers, you would click and know exactly when something would show up and where. With scrollers, you would scroll but you wouldn’t exactly know where your position is relative to the threshold (imaginary line) that triggers the next thing. However, I was always in awe with great scrollytelling concepts that I actually never implemented a stepper until now. I think I’ve been influenced too much by my current job in the tech industry where we add onboarding wizards to guide new users though a complex software product (thanks team…).
The fun part for me was implementing the legend as a stepper too. I actually drew the legend with Adobe Illustrator, so I exported one image per step and had the stepper event reference the right image with a fade transition.
The stepper was much quicker to “get right” because it was so predictable. Scrollers from my past experience were so subjective and took many iterations to “feel right”. I also imagine that readers would feel more in control with the stepper as opposed to a scroller (not knowing how much to scroll before the next event and sometimes scrolling up a bit to overcorrect).
In this project, I poured my focus into the functional coding and design requirements rather than feeling more experimental and explorative like my past personal projects (where I wanted to implement a new technique). I have noticed my visual senses improved and my work looked cleaner. I think my new prioritization would be thinking about story and structure first, then functionality and readability, and finally the other decorative effects in my data visualization.