P5JS - Data Visualization

Background

Data visualization and infographics represent distinct concepts that should not be conflated.

Infographics serve as instruments for examining datasets or comprehending intricate information through bespoke visual components. The removal of these visual elements results in the loss of significant portions of information, if not all, unless supplemented by explanatory text (Önduygu, 2015). Infographics represent complex entities, ideas, or processes using visual structures, either directly or indirectly via diagrams and similar means.

Blank container

Conversely, data visualizations employ attributes such as size and position of abstract visual elements to depict datasets, facilitating intuitive comprehension of extensive data tables, identification of notable patterns, and the generation of novel insights. Color is often utilized for communicative purposes in information visualization, such as categorization through color-coding (Önduygu, 2015).

Blank container

Reference: Metallica On Stage

Blank container

Reference: History of Philosophy

Blank container

Reference: Visualization of Music Listening Logs

Blank container

Reference: Visualization of Türkiye’s 2024 Local Elections

Case Study

Find or create a table of data using Microsoft Excel or Google Sheets. Starwars Characters - starwars_characters.csv
Export the data as .csv file.
Use one of the examples provided at Sources & Tutorials section to start visualize the data you gathered.

sketch.js

let data;
 
let nameArr = [];
let heightArr = [];
 
function preload() {
  data = loadTable("Starwars Characters - starwars_characters.csv", "csv", "header");
}
 
function setup() {
  createCanvas(1300, 900);
  noLoop();
 
  // number of columns - determines the number of properties (Keys)
  print("Number of Columns:", data.getColumnCount());
 
  // number of rows - determines the number of characters
  print("Number of Rows:", data.getRowCount());
  
  
  //print("Starwars Character Names", data.getColumn('name'));
  //print("Starwars Character Heights", data.getColumn('height'));
  
  nameArr = data.getColumn('name');
  heightArr = data.getColumn('height');
 
}
 
function draw() {
  background(200);
  textSize(10);
  textAlign(RIGHT);
  for(let i = 0; i < nameArr.length; i++) {
    text(nameArr[i], 100, 20 + 12*i);
  }
  
  for(let i = 0; i < heightArr.length; i++) {
    //text(heightArr[i], 150, 20 + 12*i);
    let redVal = map(heightArr[i], 66, 264, 0, 255);
    noStroke();
    fill(redVal,0,0);
    rect(110, 15 + 12*i, heightArr[i], 3);
  }
 
}