Assignment 4: Visualizations

Inspiration

For this project, i wanted to showcase some data from my childhood: Pokémon. I found a dataset on Kaggle which showed all pokemon and their typings, battle statistics, amongst other details.

I decided to create a pie chart that showcased the distribution of primary pokemon typings in P5js.

Implementation

I imported the dataset into p5js and began collecting information on each pokemon by creating a map, and assigning the keys to each type, and accumulated as I went through. I then pushed this to an array so I could create the pie chart.

pokemonMap = new Map();
numRows = table.getRowCount();
for (let r = 0; r < numRows; r++){
    let type = table.getString(r, 'type1');
    if(!pokemonMap.get(type)){
      pokemonMap.set(type, {val: 1});
    }else{
      pokemonMap.get(type).val+=1;
    }
}
anglearr = [];
for(let [type,obj] of pokemonMap){
  anglearr.push({type,val:obj.val})
}

I standardized each value by dividing by the total number of rows then multiplying by 360 to get the arc of each type by degrees. I increased the currangle variable so I could slowly build towards 360 degrees.

background(255);
  let currangle = 0;
  for(let i=0; i < anglearr.length; i++){
    fill(random(255),random(255),random(255));
    let nextdeg = anglearr[i].val/numRows*360;
    arc(width/2, height/2, width/2, height/2, currangle, nextdeg, PIE);
    currangle+=nextdeg;
  }

It wasn’t possible to tell which type belonged to which slice, so I added some trigonometry to add text that was offset by a radius to display each type next to their slice, with the same background color.

let midangle = (2*currangle+nextdeg)/2
let y = textrad * sin(midangle)
let x = textrad * cos(midangle)
text(anglearr[i].type, width/2+x, height/2+y)

The completed pie chart looks like this:

Reflection

I think there are some issues surrounding some of the sizes of the slices, but I am happy with the result. Most of my time writing the code for this comprised of figuring out the operations to use to standardize the angles and where to place the text. I know that pokemon was a part of many of our childhoods, and I find that looking back with an analytical lens is pretty interesting.