Population by pixel

The more pixelated the image, the closer the animal is to extinction.

Comment

Inspiration

This project is inspired by WWF ads made by Japanese designer Mikami Yoshiyuki in 2008.

Although the ad was static and was used in print, I added a dynamic slider to make it interactive and visualize the difference better. Now you can add a picture of any animal along with its population to create visualization.

What it does

  • Helps you to visualize population of endangered and vulnerable species as a function of its image. Each pixel represents a single animal, as the population numbers rise and fall the image will either become more legible or disappear completely.
  • It also has a slider through which you can simulate a population number to see the change in the image

How we built it

  • made a p5.js script to work with individual pixel.
  • Population data is used from WWF website

Challenges we ran into

  • This was my first time working with p5.js. After building several rough sketches and looking at hundreds of examples, I built the somewhat satisfactory first version.
  • Making the formula which exactly calculates number of pixels to show according to the population of species
  • Syncing the slider with the changes in image

Accomplishments that we're proud of

  • Building an interactive data visualization

What we learned

  • Working with p5.js and individual pixels
  • visualizing number as a function of its image puts things in perspective
  • How to convert image into an array

What's next for population by pixel

  • Making and deploying a website so that anyone can view and manipulate images
  • Using data like year to show the progress or decline
  • Making it like a dashboard including all endangered and vulnerable animals with regularly updated data would be cool.
  • I can also add videos of animals for visualizations.
  • Performance optimizations

Built With

Share this project:

Updates