In this project you use p5js code to make an interactive illustration, or visualization of some data you collect. This won't be just an XY chart, or a bar chart, but can be whatever creative way you choose to portray the trends in the data you collect. This is sometimes called an "infographic" and you see them on-line, on TV and in publications. The twist is that your work product must be "responsive" in some way to user input.

I am pushing folks to use JavaScript in the form of p5js, but if you want to complete project in Python, that is OK, too.

What sort of data?Pick something that will hold your interest.Here are some ideas but you are not limited to my suggestions as long as you follow the guidelines below:

Pick something you canquantify. This means something you can count or something you can measure. Examples include but are certainly not limited to:

• The number of cars, trucks and SUVs of particular makes, models or colors in a campus or shopping center parking lot over time (slide through time?)
• How many of a particular fashion style you can count in some public place in a 15 minute period. (Again, with some selection of place or time from among several choices).
• Numbers and styles of beards and mustaches sited during the day.
• Number of books in several different genres (e.g. Computer, Mystery, Teen Paranormal Romance, Cooking) found on the shelves of a local Barnes and Noble or Books a Million, etc.
• Sizes (length, height, weight) of my or my friends' pets.
• Total number of minutes in commercials in 2 hours of TV programming, perhaps for local (Over The Air, say Channel 9) channels versus a cable-only channel (say Discovery). Or break down several more hours of TV into commercial "genres", e.g Vehicles, Medical, Lawyer, Sports Promo, etc.
• Scrape some data from the web (perhaps using Python) and display it via an update-able p3js canvas.

The idea is to measure something that answers a question in which you are interested, and then display those measurements in a creative, visual, interactive way.

Guidelines

You must have at least three categories and you must collect at least 30 data points. There should be at least one count or measurement in every category, in other words, no completely empty categories.

After you collect your data, you must post your categories and numbers as a reply to your initial post.

You must make some sort of visual display of your data using p3js and any other JS or html/css code you can write, as well as run.

If there are pictures that help you make your point, then please use them. You may use pictures from the web, or pictures you take, (as long as they do not show anyone's face)

All images and subjects must fall into the conventionally understood bounds of "good taste".Enough said. I would also avoid politics and religion if at all possible.

Visualizing your Data

I am hopeful for some really creative ideas here, but as a start, here are a couple of suggestions. You must follow the guidelines, but you do not have to follow my ideas for visualization - come up with your own if you like.

At a minimum, your infographic must contain all of the categories for which you collected data, and a viewer should be able to learn something interesting about the categories or their comparison from looking at the output of your program. What distinguishes an interactive visualization such as the one you are building is that it is not static -- the user can interact with it in some way possibly to reveal more information or structure.

Some ideas:

A simple "word cloud" where the size of a word, say "Toyota" relates to the number of that brand of vehicles you observed. Arrange the words on your canvas however you like. As you probably know from this point in the class, you can use the text( ) and related methods here. Have something interesting happen when you click on a word.

A bar chart using pictures, where the height, width or area of the picture shows the quantity of your observations in a particular category. The pictures must symbolize your categories in an understandable way. Let the user interact and explore the chart in some interesting way.

Find a way to use color to make your points. In addition to rgb (Red, Green and Blue), p3js has a color model called HSB (Hue, Saturation and Brightness) that let's you use a single number to pick out a shade along the rainbow, with lower numbers showing as red, intermediate numbers as green, and higher numbers as blue or purple.

Always add some element ofinteractivity- is there something that could happen when you click the mouse on an element of the infographic that would reveal additional information or insight? (pop-up a text "factoid" or another pic).

Could you use p3js audio capability to add "sound bites"? Or add sound effects to increase the impact and intelligence of your visualization?

Here are 45 ways to visualize two numbers:

http://www.scribblelive.com/blog/2012/07/27/45-ways-to-communicate-two-quantities/Links to an external site.

Some examples from works in progress:

https://policyviz.com/helpmeviz/Links to an external site.

Some more (really a lot more sophisticated than we need) examples:

http://flowingdata.com/