Michael Shah - CS 5340

In-Class

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

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.
You should have some buttons or items that you can hover over.
Hovering or clicking should provide details on demand.
Pressing the mouse or moving a zoom slider should provide some zooming in.
- I recommend looking at the scale and translate commands.

How I approached the problem:

I downloaded an image from the web.
I made a nice function for a button I could hover over and display some text (and reuse this function)
I then loaded my image in paint, and figured out what pixels I should draw the little boxes
Then I started a httpserver (python -m SimpleHTTPServer)
I typed in http://localhost:8000, and then navigated to where my p5 sketch.js and index.html lived
Then I tested out my sketch
The zooming proved a little tricky, so I made a 'scaleFactor' varaible.
It was useful to print some text to the screen and debug how zooming affected my mouseX and mouseY coordinates.
The rest of the creative process is up to you!

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

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

In-Class

Grading