Week 3: [Data Viz] Some sort of data visualization

Below is the p5 sketch.

Conceptualization

Pi’s Some sort of data visualization is literally some sort of data visualization and trying to remove things that are not necessary. Inspired by Saturay Morning Breakfast Cereal, this data shows true, but useless facts.

2) ⚙️ Technical Plan of Attack & Implementation

Once we get the data, drawing the bar is just defining some parameters and working with the rectangles accordingly.

  // Calculate dynamic dimensions
  let padding = 200; 
  let graphWidth = width - 2 * padding;
  let barWidth = graphWidth / data.length; 
  let colors = []; // Array to hold the bar colors
  for (let i = 0; i < data.length; i++) {
    colors.push(color(255, 105 + i * 10, 0)); // Gradually changing the color
  }
  // Draw the bars
  for (let i = 0; i < data.length; i++) {
    fill(colors[i]);
    noStroke();
    rect(padding + i * barWidth, height - padding - data[i] * barWidth, barWidth - 1, data[i] * barWidth);
  }
// ... and so on

I could have loaded from the csv file, but the data is small enough.

3) 🎨 Artistic Plan of Attack & Implementation

Just to keep things not boring, I played with some automatic orange gradient for the bar colors by using

  let colors = []; // Array to hold the bar colors
  for (let i = 0; i < data.length; i++) {
    colors.push(color(255, 105 + i * 10, 0)); // Gradually changing the color
  }

4) 💪 Challenges

No challenge.

5) 💡 Potential Improvements

No further improvements are needed, I need to learn to restrain yourself.

6) 🖥️ Source code

🖥️ Source code is just a single sketch.js file at : https://github.com/Pi-31415/Intro-To-IM/blob/main/Assignment-4/sketch.js

📖 References :

Leave a Reply