p5.js Web Editor | Week 04: Data Visualization

xxxxxxxxxx
let data; // Variable to hold the loaded data
let chart1, chart2; // Variables to hold the two chart instances
​
function preload() {
    // Load the CSV file containing blood pressure data
    data = loadTable('blood_pressure.csv', 'csv', 'header');
}
​
function setup() {
    // Create a canvas of specified size
    createCanvas(800, 800); 
    noLoop(); // Run draw() only once
    createAgeGroupChart(); // Function to create the age group chart
    createSexChart(); // Function to create the sex chart
}
​
function createAgeGroupChart() {
    const ageGroups = {}; // Object to hold blood pressure data by age group
    
    // Ensure the data is loaded
    if (data) {
        // Iterate through each row of data
        data.rows.forEach(row => {
            const agegrp = row.getString('agegrp'); // Get age group
            const bp_before = row.getNum('bp_before'); // Get blood pressure before
            const bp_after = row.getNum('bp_after'); // Get blood pressure after
​
            // Initialize arrays for this age group if it doesn't exist
            if (!ageGroups[agegrp]) {
                ageGroups[agegrp] = { before: [], after: [] };
            }
            // Add blood pressure data to the respective arrays
            ageGroups[agegrp].before.push(bp_before);
            ageGroups[agegrp].after.push(bp_after);
        });
​
        // Extract labels and average values for the chart
        const labels = Object.keys(ageGroups);
        const avgBefore = labels.map(label => avg(ageGroups[label].before)); // Average BP before
        const avgAfter = labels.map(label => avg(ageGroups[label].after)); // Average BP after
​
        // Get context for the first chart
        const ctx1 = document.getElementById('chart1').getContext('2d');
        chart1 = new Chart(ctx1, {
            type: 'bar', // Bar chart type
            data: {
                labels: labels, // X-axis labels (age groups)
                datasets: [
                    {
                        label: 'BP Before', // Dataset label
                        data: avgBefore, // Data for BP before
                        backgroundColor: 'rgba(75, 192, 192, 0.6)', // Fill color
                        borderColor: 'rgba(75, 192, 192, 1)', // Border color
                        borderWidth: 1 // Border width
                    },
                    {
                        label: 'BP After', // Dataset label
                        data: avgAfter, // Data for BP after
                        backgroundColor: 'rgba(153, 102, 255, 0.6)', // Fill color
                        borderColor: 'rgba(153, 102, 255, 1)', // Border color
                        borderWidth: 1 // Border width
                    }
                ]
            },
            options: {
                responsive: true, // Responsive to screen size
                scales: {
                    y: {
                        beginAtZero: true, // Y-axis starts at zero
                        title: {
                            display: true, // Show title
                            text: 'Blood Pressure' // Y-axis title
                        }
                    },
                    x: {
                        title: {
                            display: true, // Show title
                            text: 'Age Group' // X-axis title
                        }
                    }
                }
            }
        });
    } else {
        console.error("Data not loaded properly"); // Error handling if data isn't loaded
    }
}
​
function createSexChart() {
    const sexGroups = {}; // Object to hold blood pressure data by sex
​
    // Ensure the data is loaded
    if (data) {
        // Iterate through each row of data
        data.rows.forEach(row => {
            const sex = row.getString('sex'); // Get sex
            const bp_before = row.getNum('bp_before'); // Get blood pressure before
            const bp_after = row.getNum('bp_after'); // Get blood pressure after
​
            // Initialize arrays for this sex if it doesn't exist
            if (!sexGroups[sex]) {
                sexGroups[sex] = { before: [], after: [] };
            }
            // Add blood pressure data to the respective arrays
            sexGroups[sex].before.push(bp_before);
            sexGroups[sex].after.push(bp_after);
        });
​
        // Extract labels and average values for the chart
        const labels = Object.keys(sexGroups);
        const avgBefore = labels.map(label => avg(sexGroups[label].before)); // Average BP before
        const avgAfter = labels.map(label => avg(sexGroups[label].after)); // Average BP after
​
        // Get context for the second chart
        const ctx2 = document.getElementById('chart2').getContext('2d');
        chart2 = new Chart(ctx2, {
            type: 'bar', // Bar chart type
            data: {
                labels: labels, // X-axis labels (sex)
                datasets: [
                    {
                        label: 'BP Before', // Dataset label
                        data: avgBefore, // Data for BP before
                        backgroundColor: 'rgba(255, 99, 132, 0.6)', // Fill color
                        borderColor: 'rgba(255, 99, 132, 1)', // Border color
                        borderWidth: 1 // Border width
                    },
                    {
                        label: 'BP After', // Dataset label
                        data: avgAfter, // Data for BP after
                        backgroundColor: 'rgba(54, 162, 235, 0.6)', // Fill color
                        borderColor: 'rgba(54, 162, 235, 1)', // Border color
                        borderWidth: 1 // Border width
                    }
                ]
            },
            options: {
                responsive: true, // Responsive to screen size
                scales: {
                    y: {
                        beginAtZero: true, // Y-axis starts at zero
                        title: {
                            display: true, // Show title
                            text: 'Blood Pressure' // Y-axis title
                        }
                    },
                    x: {
                        title: {
                            display: true, // Show title
                            text: 'Sex' // X-axis title
                        }
                    }
                }
            }
        });
    } else {
        console.error("Data not loaded properly"); // Error handling if data isn't loaded
    }
}
​
function avg(array) {
    // Calculate the average of an array
    return array.reduce((a, b) => a + b, 0) / array.length;
}
​
Cookies

Sketch Files

Console

Preview
