Skip to content

Data Visualization with P5.js

I never thought p5.js could be used to visualize data. I’ve heard that a library called d3.js is usually used to make data visualization, but not p5.js. But when we were taught in class about uploading .csv, .json, or using API in p5.js, I thought it’s cool enough that p5.js can do almost anything.

Learning from class and also from a workshop about data visualization using Mappa, “a library to facilitate work between the <canvas> element and existing map libraries and APIs” (as it’s said from the description on Github), then I explored using this tool and p5.js.

I really wanted to visualize a data about human emotions. I googled some data, and I found a project by Spur Project, an organization which focus on preventing suicide and take parts in supporting mental health. They have a project called “How is The World Feeling“, an open-source database of human emotions all over the world.

The Process

Using p5.js, I uploaded the .csv from http://howistheworldfeeling.spurprojects.org/ in preload() function.

function preload() {
	data = loadTable('How-is-the-US-Feeling.csv', 'csv', 'header');
}

Then using the Mappa tutorial, I created a world map in canvas.

let myMap;
let mappa = new Mappa('Leaflet');
let canvas;
let data;

textTitle = "Where Are The Happy People in The US?";

var options = {
	lat: 40.206254,
  lng: -100.845827,
  zoom: 3,
  style: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png"
}

function preload() {
	data = loadTable('How-is-the-US-Feeling.csv', 'csv', 'header');
}

function setup() { 
  canvas = createCanvas(800, 600);
  
  myMap = mappa.tileMap(options);
  myMap.overlay(canvas);
} 

And since I wanted to show each emotion in different colors, I used case switch to define which emotion has a specific color.

switch(data.getString(i, 'Emotion')) {
        case 'Happy':
          noStroke();
     			fill(244, 170, 78);
      		ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(244, 170, 78, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
        case 'Sad':
          noStroke();
     			fill(45, 87, 173);
      		ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(45, 87, 173, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
        case 'Anxious':
          noStroke();
          fill(116, 128, 117);
          ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(116, 128, 117, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
        case 'Angry':
          noStroke();
          fill(122, 14, 14);
          ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(122, 14, 14, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
        case 'Peaceful':
          noStroke();
          fill(242, 255, 250);
          ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(242, 255, 250, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
        case 'Powerful':
          noStroke();
          fill(113, 38, 147);
          ellipse(pos.x, pos.y, (frameCount%70)/10, (frameCount%70)/10);
      		fill(113, 38, 147, 1);
      		ellipse(pos.x, pos.y, (frameCount%50), (frameCount%50));
          break;
      }

 

Pretty much that’s it what I had done. Here’s the full code, and here’s the result.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *