Design Lab: Coding motion graphics

Using the quantitative data we collected in our urban field exercises, we're tasked to create 2 motion graphics on P5.js using javascript. I had some experience for basic html coding last time using Dreamweaver and Front-page, I have no clue when it comes to other programming languages.

I entered the percentage of users using chopsticks correctly into the graphs. I was able to achieve the static graphs and the 'bouncing' motion for the data bars. My brother helped and guided me through most of the animation parts for the data arc. I find the whole exercise very intriguing but also incredibly challenging as mathematics and programming skills are needed.

Data bars:

Animation: https://editor.p5js.org/acechia/sketches/BydIf53f4

Data arcs:


Animation: https://editor.p5js.org/acechia/sketches/lnEO9Cmbl