CONCEPT:
In this assignment, my primary objective was to visualize data pertaining to different types of energy consumption spanning from 1900 to 2018. Given the diverse nature of energy sources and their consumption patterns, I decided to employ a line graph as the mode of visualization. However, due to the multitude of energy types and their varying magnitudes of consumption, presenting them all on a single graph would result in a cluttered and incomprehensible visualization. To address this issue, I opted to implement a dropdown menu using the createSelect() function. This feature allows users to select a specific energy type, and subsequently, the graph updates dynamically to display the consumption trend exclusively for the chosen energy source.
One of the prominent challenges encountered during the implementation phase was the disparate scales of energy consumption among different energy types. Some energy sources exhibited significantly higher consumption values compared to others. Consequently, if a uniform y-axis scale were to be applied across all energy types, it would lead to visual distortions, making the graph incomprehensible. To mitigate this challenge, I implemented a dynamic scaling mechanism. This involved calculating the maximum consumption value for the selected energy type and mapping the y-axis scale accordingly. By dynamically adjusting the scale based on the maximum consumption value of each energy type, the visualization maintains clarity and accuracy across all displayed data points.
My favorite part of the code is processData(). It extracts and organizes data for visualization. It initializes empty arrays xValues and yValues, then loops through each row of the dataset. It extracts year and energy consumption values based on the selected energy, storing them in the arrays. This function ensures accurate representation of energy consumption trends.
REFLECTIONS:
Completing this assignment was definitely challenging, but I persisted by referring to the p5.js documentation whenever I encountered difficulties. This helped me understand how to use different functions and techniques to achieve my goals. I also attempted to enhance the visualization by incorporating a background picture, but encountered some issues with how it interacted with other visual elements. I’m eager to continue exploring this project further. I see a lot of potential for adding more interactive elements to make the visualization even more engaging and informative.