Week 4 : Data Visualisation

Concept

This week I decided to implement a simple data visualisation. The simplest form of data visualisation techniques that came in mind were graphs. Out of many ways to visualise data I decided to implement four basic ones, Bar graph, Pie chart, scatterplot and Line graph. I was motivated to make my design interactive to the user, so I wanted to allow manipulation of  the default data from user input.

Implementation 

I managed to implement my design by creating four classes one for each of the four data visualisation method I chose. In each class, I defined data and categories attributes and implemented a display function that uses the data stored to decide how the graph is drawn. I also implemented a function outside all classes to decide what graph is plotted depending on the user input. I also added an input window, where user can add data and see them in the visualised.

Sketch

Below is my final sketch:

Piece of Code I am proud of

I am particularly proud with the design of the pie chart as it was hard to write labels and colour each pie section. Initially I used random colour generation but the colour appeared blinking so I decided to add a colour attribute so each section could have its colour. Below is the pie chart class definition :

class PieChart 
{
  constructor(data, categories) 
  {
    this.data = data;
    this.categories = categories;
    this.total = 0;
// Get sum of all data 
    for (let i = 0; i < data.length; i++) 
    {
      this.total += data[i]
    }
    this.colors = [];
    for (let i = 0; i < this.data.length; i++) 
    {
// Generate a unique color for each data section
      this.colors.push(color(random(255)%200, random(255), random(255)));
    }
  }
  
  display() 
  {
    let angleStart = 0;
    let radius = min(rectW, rectH) * 0.4; 
    let centerX = rectX + rectW / 2;
    let centerY = rectY + rectH / 2;

    for (let i = 0; i < this.data.length; i++) 
    {
      let angleEnd = angleStart + (this.data[i] / this.total) * TWO_PI;
      fill(this.colors[i]);
      arc(centerX, centerY, radius * 2, radius * 2, angleStart, angleEnd, PIE);
      
// Get positions for Categories lables 
      let midAngle = angleStart + (angleEnd - angleStart) / 2;
      let labelX = centerX + cos(midAngle) * (radius * 0.5); 
      let labelY = centerY + sin(midAngle) * (radius * 0.5);

      fill(0);  
      textAlign(CENTER, CENTER); 
      text(this.categories[i], labelX, labelY); 
    
      fill(0);  
      textAlign(CENTER, CENTER);  
      text(this.categories[i], labelX, labelY);
      angleStart = angleEnd;
    }
     
  }
}

Reflection and Improvements for future work

For future work, I would prefer adding more options with multiple kinds of data such as multi-categories data. For example data with temperatures of two cities. A visualisations techniques that allows for visual comparison between the two set of data.