Documentation and Process Work
Conceptual Development
Inspiration for project -3 came from December 9, 2021, snowfall in Toronto when I was exploring my options for project 3 and watching snowfall from my window. The idea took its solid form while working on my thesis during the same week. My thesis requires working with a JavaScript library and while looking for a solution for a code logic I discovered a tutorial on snowfall. After watching the tutorial, I decided to inject Toronto’s snowfall and windspeed data to create an interactive visualization.
Concept Selection and Application
The animation in the tutorial does not take any user input to manipulate snowfall. However, it was written in JavaScript, and this makes it easy enough to manipulate. To make it interactive I wrote my own version with additional variables. My initial plan (easy one) was to ask user to select year from a drop-down value selection. It works but it was not intuitive and visually appealing. My 2nd exploration involved a HTML value slider to switch between year. This made the visualization comparatively intuitive, but it was not the best solution.
Last year I worked with google charts, during my research I discovered D3.js, which provides amazing solutions and plugins for data visualization. As a result, I choose a D3.js plugin library for the Year Selection. The current D3 slider is visually appealing, intuitive and easy to manipulate in code.
Design Factors
This visualization is an interactive version of Toronto’s snowfall dataset webpage from weatherstats.ca. The entire visualization is the result of multiple iteration, placement of design elements and numerical manipulation of values. In addition to the changing height of snow pile, I decided to add a measuring ruler and numerical value to visualize the changing nature of snow height. The change in the wind speed and size of the snowflakes also enhance the visualization effect by distincting higher snow level from a lower one. I have tried to insert actual wind speed data, but it was making the visualization complicated. I could only get an average wind speed dataset, the dataset shows a mean value and does not create any visual aid because of its uniform(average) nature.
References
Snowfall Data
https://toronto.weatherstats.ca/charts/snow-yearly.html
Wind speed Data
https://toronto.weatherstats.ca/charts/wind_speed-hourly.html
d3-simple-slider
https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518
Coding Challenge #88: Snowfall
https://www.youtube.com/watch?v=cl-mHFCGzYk