Description: A data visualization of a weekly weather forecast in Paris, France. The information in the white box displays data from the “condition” entry, which describes the current weather condition. The bottom half of the design displays data from the “forecast” entry. The line graph represents a weekly forecast. The points plotted are the highs for each day, as are the numbers displayed underneath.
I came up with the idea of creating a line graph when I was reading Ch 12 in the textbook. Example 12-2 explains how to create a data visualization of baseball statistics. I realized I could use this same basic idea and apply it to weather forecast data.
Below is my first concept sketch. I wanted the top half of the canvas to be dedicated to the current weather condition, and the bottom half of the canvas to be a weekly forecast, represented by a bar graph.
I started thinking about how each line would be plotted. The first point on the line would have a y-value of the current day’s high, and a decided x-value. The second point on the line would have a y-value of the next day’s high, and an x-value of the decided value plus an interval multiplied by i, the index variable in a for loop. I would draw the lines 6 times to represent 7 days (because there will be 7 points). This will create a group of lines that are evenly spaced and connected at their starting and ending points.
I realized that because the coordinate system in p5js has its origin in the upper-left corner, plotting the raw values of the high temps would create a graph that looks upside down. To fix this, I mapped the high values to negative numbers. This way, the greater numbers would be plotted higher up on the canvas, and the lesser numbers would be plotted lower down on the canvas.