For this assignment I was keen to experiment with data and data visualization. There are so many ways data can be visualized and presented – I wanted to explore this. I began by looking up ways data can be visualized such as bar charts, pie charts, maps, etc. I liked the look of bubble charts.
By using data found on trends.google.com about the number of types of flowers in different regions in the US, I decided to make a bubble chart. By using the preload function I loaded the data. Then within my for loop I drew the bubbles which had sizes according to their frequencies – bigger bubbles have a larger amount of types of flowers in their assigned region and smaller bubbles have less number of different types of flowers in their designated region. I wanted to visualize these at random locations thus used ‘const x = random(0, width);’ and ‘const y = random(0, height)’. However this caused an issue of overlapping bubbles – which is one of the biggest challenges I had. As shown below, the bubbles’ sizes to respond to their frequencies however there are many overlapping bubbles and many are cutting cut off of the canvas.
I wasn’t able to grasp how to solve this issue on my own hence watched many tutorials online such as Shiffman’s YouTube tutorials as well as used the p5.js references to help. Although I couldn’t completely apply the code Shiffman demonstrated, I was able to implement the logic. I had to make a bubbles array. Also, I was able to avoid the bubbles getting cut off by declaring width and height and then implementing it into the code. Here it seems like the bubbles are getting cut off however on my canvas all the bubbles are within the frame of the canvas – https://editor.p5js.org/zainaiqbal/sketches/8jXV8InrS
In the future, I would like to work on reducing the spacing between the bubbles as well as increase their sizes so that the differences are more obvious – like they were in my code earlier (shown above). Every time I attempt to do this, my code crashes. Also, I would like to include a function where every time the mouse is pressed on the canvas, the canvas refreshes and so the arrangement of the bubbles change.
This is the final outcome –
Nice job Zaina! You could do something simple like this to increase the size, where you multiply the types variable by some number: circle(x, y, types*2);
Also, you had a little mistake in the random color line of code for fill, in line 62 I believe. You need to call random three times like the following, not just once: fill(random(0, 300, 100), random(0, 300, 100), random(0, 300, 100)); Also, random only takes two values. I’m not sure what your intention is here.
PS One more idea I had is that it’s ok if they overlap some, you could use a combination of transparency and mouseover to highlight specific ones. You could also arrange them on screen geographically, so they sort of form the shape of the US (for an advanced version!).