Data Analysis

If you want to see an example of a data analysis page, replace the contents of the analysis.js within the weather app example with the code below.

Your data analysis will likely be completely different due to the specific data you are representing.

loadData()

const CANVAS_WIDTH = 800
const CANVAS_HEIGHT = 300
const X_SPACING = 120 // space dates out by 120 pixels along the x-axis
const Y_SPACING = 10 // space degrees out by 10 pixels along the y-axis

function setup() {
    let canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT)
    canvas.parent("p5js")

    for (let i = 0; i < days.length; i++) {
        let x1 = X_SPACING + i*X_SPACING // Where will this line segment START along the x?
        let x2 = x1 + X_SPACING // Where will this line segment END along the x?

        // Draw the date
        noStroke()
        text(days[i].date, x1-40, 10)

        // Draw the vertical line
        stroke("#CCCCCC")
        line(x1, 20, x1, CANVAS_HEIGHT)

        // If we're on the last day, stop here since we're not drawing a line segment to the next day
        if (i == days.length-1) {
            break
        }

        // Draw a red line indicating the high for today and tomorrow
        stroke("red")
        let y1 = CANVAS_HEIGHT - days[i].high*Y_SPACING
        let y2 = CANVAS_HEIGHT - days[i+1].high*Y_SPACING
        line(x1, y1, x2, y2)

        // Draw a blue line indicating the low for today and tomorrow
        stroke("blue")    
        y1 = CANVAS_HEIGHT - days[i].low*Y_SPACING
        y2 = CANVAS_HEIGHT - days[i+1].low*Y_SPACING
        line(x1, y1, x2, y2)

    }
}