Assignment 1 - Data Visualization using Processing - (100 points)



Due Date: 2/11/2016 at 11:59pm

Objectives:



  • Familiarize yourself with the Processing language
  • Create basic visual representations of data sets

Load a CSV file



Create a sketch that can load a CSV file into Processing. Using a file chooser (10 points), allow a user to load a data set into your sketch and explore the data. Assume that the first row of the CSV file has a header with attributes per column. Depending on the number of attributes in the visualization, you will display one of the following visualization:

  • A bar chart for one-dimensional data (10 points)
  • A scatterplot for two-dimensional data (10 points)
  • A scatterplot matrix for multi-dimensional data (10 points)
Make sure to have meaningful axes to the visualization. Your axes should changes their labels based on the data in the file.

User interaction



A user should be able to interact with the visualization in the following forms:

  • Filter using sliders - Allow the user to interactively filter out data values. For sliders, use any of the GUI libraries on the Processing Libraries page. (10 points)
  • Interactively highlight data (change color of data element and provide tooltip with actual data values) based on mouse pointer position. (10 points)

Explore datasets (40 points)



For this part of the assignment, use the cars dataset (20 points) and any dataset of your choice (20 points) to explore the data and take screenshots that help you find insights in your data. Please remember to submit (post on your blog) at least 3 insights and corresponding screenshots in your submission for each dataset. You should have at least six total screenshots (3 per dataset) at least one of which must contain a bar chart, a scatterplot, and a scatterplot matrix.

Extra credit: Interactive Parallel Coordinates - (5 points)



Parallel coordinates is a popular technique for visualizing multidimensional data. More information can be found in the original paper, an article by Stephen Few, a blog post by Robert Kosara and an interactive demo in Protovis and D3.

For this assignment, you will implement a parallel coordinates interface to the cars dataset. A user should be able to interactively filter the data and visualize the results similar to those in the Protovis or the D3 demo, where the data elements that do not meet the filtering criteria are shown in light grey while the data elements that do meet the criteria are highlighted in some color.

Extra credit: Create an android app (5 points)



Use the Android mode in Processing to create an android app of a scatterplot visualization sketch with prespecified data.

Extra credit: Create a web-based sketch in P5JS (5 points)



Create a p5js version of a scatterplot visualization sketch, put it online, and include the link to the online sketch in your blog post.

Submitting the Assignment



Submit a link to the following in a single zip file on your blog

  • Your sketches and ALL the CSV files that you use for testing
  • Your parallel coordinates sketch along with additional data (if used) for the parallel coordinates extra credit
  • Submit the APK file for the android app (if attempting the extra credit)
  • A detailed README and some screenshots on your blog