For my final data visualization project, I chose to work with a dataset of just over 3,000 NFL players from 1994-2019. It gave me the year they played, and how many receiving yards they got that year.
I decided to work with this dataset because I love the idea of seeing such a cool sport evolve over time.
In my visualization, the data is represented as dots. These dots represent players, and are randomly placed across the screen. The dots are sized based off of how many receiving yards they got that season, and that same variable also controls the color of the dots. When you change years, you can see the dots change size in real time.
To interact with the visualization, click on a dot, then hover over any dot you want. On the far right, it will show you the player's name and how many receiving yards they got that season. To change the year, you can use the up and down arrow. Watch the dots grow, shrink, pop up, and disappear!
One interesting thing I noticed during this project is that p5.js will randomly assign a shape it's spot, but it stays at the same location throughout the code, so that you can always know the next location of your dot.
Something I still wonder about is how p5.js randomly assigns a location, or any variable.
The most challenging moment of this project was when I had to figure out how to gather the names from my csv and activate them after a mouseX, mouseY variable was activated in an array.
If I had more time, I would like to tell people what position the player played.
My proudest moment during this project was when I finished cleaning the massive google sheet.