Introduction

In the demoes the past few lectures, you saw how to visualize the colors present in an image! We used the Counter container, d3, and data maps to:

• Create a histogram of the colors present in an image
• Explore the differences between jpg and png images
• Understand how to use different initial processing (like truncation) and post processing (like sorting a list) to change the histogram of colors displayed

This time you will consider how to visualize this data, but using a non-rectangular representation, most likely using circles.

Assignment

Rectilinear data visualization (like histograms, bar charts, etc) is quite common and generally easy to develop. Here we will think about trickier cases: how could you visualize the data using a different shape. For example, how could you visualize the same information with circles?

For this lab, you will update the code from the demo used to display the data on frequency of color occurence in an image. You should update the javascript code to:

• Use a shape that is not a bar-chart rectangle to convey the same frequency information

Note, you may use any shape you wish (it is not required to be circles, although they are likely to be the most straightforward). However, you should think hard about what you are displaying and why.

You should start off where we left off in lecture and go from there. We have placed the code we ended with in lecture in lab_Visualization.

Downloading the base files

As always, you can find the files inside of the latest version of the CS 205 workbook.

• Follow the instructions on the CS 205 git exercise page to update your workbook to the latest version and merge the release branch lab_Visualization into your local master branch.
• The lab_Visualization project will be located at workbook/lab_Visualization/js/vis.js inside of your CS 205 directory

As this is a lab, collaboration is both welcome and expected! Have an idea? Share it! Came up with an image? Share it! Cinda, Wade, and the whole CS 205 course staff will all be checking out Piazza to help the discussion and check out what you've come up with.

Submission

For this lab, you should be ready to show off your image to the whole class. You must also commit and push your code to your forked repo before 11:00am.

Instructions to commit and push are also found on the CS 205 git exercise page