Today we learned about data visualization. Today you also heard me tell some stories about real life events, that were supported by data. Today, you are going to build an interactive data visualization using P5JS.

Your goal will be to make a program that loads an image, and builds a sort of New York Times style infographic. You will have three components: Overview, Zoom and Filter, and Details on Demand
  1. You should load an image.
    • Loading images on the web can be a little tricky, as loading any data requires proper permissions. To get around this do the following.
      • If you are on windows, you will have to download Python 2.7 (Mac and Unix users should have it installed)
      • You should either link directly to the image (somewhere on the web) or follow these instructions to learn how to create a local web server.
  2. You should have some buttons or items that you can hover over.
  3. Hovering or clicking should provide details on demand.
  4. Pressing the mouse or moving a zoom slider should provide some zooming in.

How I approached the problem:

Here is my example (Use mouse to zoom and filter)

Here is a link to my code (hovering while zooming is not implemented)


Note that in-class activities are part of your participation grade, and participating will help you perform well on your assignments. You do not have to formally submit anything, (however I take notes of who participated!).