For this week’s assignment, I had to choose between creating data visualizations or generating text output. I decided to work on data visualization because I thought it was interesting to be able to represent data in any way I choose. My first challenge was finding the right dataset to work with. There were so many options, and I needed to make sure the data could be effectively represented. Eventually, I settled on using weather data from the United States, which I found interesting because it included dates spanning over two years, along with average, maximum, and minimum temperatures recorded each day, as well as historical record temperatures.
To visualize this data, I created a simple line graph. The graph had a title, a legend, and labels to represent the average maximum and minimum temperatures recorded over the years. The graph displayed two distinct lines, one in purple for minimum temperatures and one in pink for maximum temperatures. Below, you can see a sketch of my graph:
I faced several challenges while working on this project. First, I had to figure out how to smooth out the curves in the graph to make it look more polished. Without this adjustment, the graph had sharp and jagged edges that didn’t look right.
Another issue I encountered was related to the coloring of the graph lines. I initially set specific colors for the stroke lines but didn’t realize that the beginShape and endShape functions had built-in fill settings, causing the graph to be filled with black, which didn’t go well with the sharp edges.
Additionally, I struggled with setting the margins correctly. Initially, I used regular height and width functions and assumed the graph would fit within those parameters, but it extended beyond the canvas boundaries. By setting a standard margin value and subtracting it from the height and width, I was able to ensure the graph was drawn appropriately and to the scale of the canvas.
The part of my code that I’m most proud of is the function I created to draw the temperature lines. This function allowed me to input values from the CSV file and determine whether it was for maximum or minimum temperatures. Below is an insert of that code.
function drawTemperatureLine(temperatures, tempMin, tempMax, lineColor) {
noFill();
stroke(lineColor);
strokeWeight(2);
beginShape();
// Loop through each data point (temperature)
for (let i = 0; i < temperatures.length; i++) {
// Map the data point's position to the canvas coordinates
let x = map(i, 0, temperatures.length - 1, margin, width - margin);
let y = map(temperatures[i], tempMin, tempMax, height - margin, margin);
// Add a curve vertex at the mapped position
curveVertex(x, y);
}
endShape();
}
I separated most of my code into functions. This code is responsible for drawing the temperature lines and looping through each data point in the csv file and mapping this point onto the canvas. This function is then called inside of the drawLineGraph function, that then draws the entire graph that is inclusive of labels, legend, and titles.
Overall, this project was a relatively simple generative art piece in terms of design, but it was also the most challenging one I’ve worked on. I had to apply a lot of theoretical knowledge and do some research to overcome various obstacles. For future improvements, I would like to create separate line graphs for each dataset or column. I also want to represent the highest and lowest record temperatures for each day and add interactivity so that when you hover over the lines, the corresponding date and temperature information appear. This assignment was both exciting and challenging, and it truly tested my Interactive Media skills.