Concept
For this project, I decided to make a data visualization using a dataset of Disney movies. Instead of showing the numbers in a typical bar chart, I wanted something more fun. I represented each genre as a balloon: the bigger the balloon, the more money that genre grossed overall. I also color coded the balloons: pink for drama, purple for musical, green for adventure and yellow for comedy, so each genre is easy to distinguish.
Favorite Code
I’m especially happy with the part where I drew the balloons. The shapes and colors turned out really cute, and combining the ellipse with the string image really tied it all together! This section of the code really brought the visualization to life:
//visuals
stroke("rgba(255,255,255,0.75)");
imageMode(CENTER);
//drama genre balloon
fill("#F8BCBC");
image(squiggle, 68, 150, 20, 110);
ellipse(70, 110, sDrama, sDrama);
//musical genre balloon
fill("#9194CF");
image(squiggle, 130, 150, 20, 110);
ellipse(130, 110, sMusical, sMusical);
//adventure genre balloon
fill("#66B6B6");
image(squiggle, 225, 180, 20, 120);
ellipse(225, 110, sAdventure, sAdventure);
//comedy genre balloon
fill("#EBF1AB");
image(squiggle, 320, 150, 20, 110);
ellipse(320, 110, sComedy, sComedy);
Here’s my sketch:
Reflection and Future Improvements
One challenge I had was calculating the total gross for each genre. I couldn’t figure out how to get the program to add everything automatically from the dataset, so I just did the math myself and typed in the totals. I know there’s probably a way to loop through the data and calculate those sums directly, but I couldn’t figure out how to write it.
For future improvements, I’d like to fix that so the totals are generated by the code itself. I also think it would be fun to add more genres (with more balloons), or even animate the balloons so they float around the screen like real ones. That would make the visualization more dynamic and interactive.