Inspiration:
As someone who believes in the transformative power of data visualization, I see it as an essential tool for making complex information accessible and understandable. Visualizing data allows us to grasp patterns, trends, and insights that would otherwise remain hidden in raw numbers. In the context of healthcare, especially with something as critical as blood pressure, effective visualization can significantly impact how we interpret and respond to health data.
One of my inspirations for this project comes from the recent work of renowned data artist, Giorgia Lupi, a renowned information designer known for her innovative approach to data visualization. I loved how she turned data visualisation in an artistic human connector engaging us with tales, emotions, informations through data.
Concept: The blood pressure dataset, originally from Stata, serves as a crucial resource for understanding the impacts of various factors on blood pressure among different demographic groups. I have taken the dataset from the Github Open Source For Data Science account. The idea came into my mind after remembering how blood pressure runs into families and sometimes we don’t care about it. Though the dataset is pretty small and not too complex, I enjoyed creating a visualisation for the first time.
Codes which I’m proud of:
I had trouble with managing datasets so I used the console.log technique that we learned in the class to check if the CSV data loads correctly before any processing occurs or not. This is crucial because if the data is not available, the subsequent calculations will fail. I created two charts as the dataset had more columns, so I made two error handling for each chart.
function preload() {
data = loadTable('blood_pressure.csv', 'csv', 'header');
}
else {
console.error("Data not loaded properly"); // Error handling if data isn't loaded
}
I couldn’t find it possible nto fit the data in one chart. To make it easy to understand I created two charts which are connected based on the parameters. Here is the snippet for dynamically creating two separate charts for age and sex while keeping the layout clear. It required careful organization of data and chart settings.
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
}
]
Similarly, I did another chart for the average counts according to sex.
function avg(array) {
return array.reduce((a, b) => a + b, 0) / array.length;
}
Lastly, I tried to ensure that the charts adjust to different screen sizes while keeping everything readable and visually appealing. I used this part of code to implement it. I used Inspiration from Bar_Chart_in_P5.js video.
options: {
responsive: true,
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Blood Pressure' } },
x: { title: { display: true, text: 'Age Group' } }
}
}
p5.js Sketch:
Challenges and further improvements:
The main challenge was to find a proper dataset. I tried to use different data sets from Google Dataset Search, Kaggle, Data.gov etc but they were not showing into charts, sometimes error was coming or the dataset was too big to use for this project. I took help from chatgpt to give me resources for fine datatsets but it didn’t give me any dataset or link, suggested me to check on Github so I used the idea and searched github.