Approach and Concept:
Initially I intended to choose the generative text project, but due to a lack of ideas/direction I switched over to the data project. I personally have a strong background with data, so it was a surprise to me when I couldn’t come up with a direction with this either. Data visualizations should effectively communicate the data they are trying to visualize, however I couldn’t think of a way to cohesively do this, while applying the lessons I had learned with my projects in the past weeks.
At this point, I first attempted to find a dataset to visualize. I wanted to visualize air-pollution in New Delhi, the capital of India (where I spent a chunk of my childhood), but an appropriately formatted dataset was hard to find. So, I ended up settling on a weather dataset of the city that had hourly weather data for a period of ~50 years from the 1960s to 2010s. This dataset contained several fields, but I narrowed them down to ‘wind speed’, ‘wind direction’, and temperature.
To visualize the wind, I decided to use a simplified version of the particle generators from my previous assignment. My word would be simple enough if I could vary the color based on temperature, and vary the particle’s movements and orientations based on the wind speed and direction. However, this proved to be a bit more challenging. Removing the noise from the simulation, made it look extremely bland.
Following this, I had to strategically add noise to not disturb the visualization but still add interesting movement. But even this didn’t seem enough. Since I was borrowing ideas from my previous assignment, I felt I needed to do more. This led me to add the elements of interactivity to the project. First, clicking on the mouse, lets you move forward a day in the visualization (you only move forward an hour every 2-3 seconds otherwise). Additionally, you can navigate to any date you want using the input menu.
Lastly, I also added a visualization of the important cities in India as the starting screen. A continuation of this project could be finding and adding similar data for the other cities in the visualization.
Highlights:
My highlight for this project was certainly adding the elements of interactivity to the code. Creating the input box, and attempting to match the date by matching the string formatting was a bit challenging, even given my background. Moreover, generating the final effect was also fun it itself!
Additionally, I enjoyed the process of finding relevant data, and actually thinking of ways I could enhance the visualization.
function jumpToDate() {
let inputDate = dateInput.value();
let dateParts = inputDate.split('-');
let formattedInputDate = dateParts[2] + dateParts[1] + dateParts[0];
for (let i = 0; i < table.getRowCount(); i++) {
let rowDate = table.getString(i, 'datetime_utc').split("-")[0]; // Extract just the date part
if (rowDate === formattedInputDate) {
index = i; // Set the index to the found row
break;
}
}
}
Reflections and Future Work:
This project can still have several improvements. First of all, I would love to be able to increase the scale and include other cities/states/countries into the visualization. It would also be really cool if one could toggle between this mode, and a more ‘bird’s eye view’ to see changes both across time and geographies.
Regarding the aesthetics themselves, I believe there are several more optimizations needed especially with some of the direction-based motion. For example, the switches in direction when the next row of the dataset is accessed can be made smoother.
Lastly, as stated earlier, an obvious continuation would be to increase the scope of the visualization by adding data for other cities.
Resources:
Using Data:
Input Text:
From last week:
I realized at a later stage that this video does what I attempt to do, and took reference towards the last part of my coding:
https://youtu.be/BjoM9oKOAKY?si=tIbnzH-ndMvgCB2R
Another resource I used to understand the concept of vectors in p5.js:
https://www.youtube.com/watch?v=bKEaK7WNLzM&pp=ygUUY29kaW5nIHRyYWluIHZlY3RvcnM%3D
(Also, some other videos in the playlist)