Due: 2014-04-03 11:00a
I would like you find a partner and to start thinking about your final projects. The projects should be a step up in complexity from the work we have been doing in the assignments. They should be interactive and make use of a technique such as dynamic queries or brushed histograms to permit exploration of some interesting data set. Pick something that you are interested in and either want to know more about or want to communicate to others. Alternatively, you could make a general purpose visualization that can load other people’s data on demand. Obviously, my preference is for the work to be done in D3, but if make a compelling argument for another language I will listen.
It is worth noting that while we have talked a lot about visualizations from a theoretical standpoint, we have been using a fairly small set of visualization forms. They are fundamental forms that most designers keep coming back to, but we will be talking about more exotic visual representations and techniques soon. If you want a little bit of inspiration, flip through the book, visit the visualization zoo or browse the D3 demo collection.
Write a short proposal and email it to me by April 3rd.
For this assignment, you are going to build a pair of coordinated scatterplots. The first step is to build two scatterplots using data from our census dataset. The two scatterplots should display different data (though it is okay if they share a common variable). I used income vs percent college graduate on one and percent over 65 vs percent under 18 on the other, but you are welcome to any combination you think might be interesting. Size your two plots so they can fit side by side in the browser window.
The next task is to add some guides to the plots. The guides will help us to read values off of the scatterplot more easily. Essentially these are straight lines that go from the tip of the cursor to the x and y axes so we can see precisely where we are on the plot. There are a number of ways you might go about doing this, but I’ll describe my approach.
Rather than approaching this as a pair of lines, think of this as a rectangle that has its other two sides on the axes. The implementation of this can be done by appending a rect to the chart. I used a hidden class to make sure that you couldn’t see the guides when the page initially loads. I then added event listeners on to the canvas for mouseover (show the guides), mousemove (adjust the attributes of the guides so they track the cursor), and mouseout (restore the hidden class to hide the guides). I then styled then to be a light gray and dashed so they wouldn’t be too visually obstructive.
We want to do brushing and linking between the two charts, so we need to add some brushes. You will want a brush for each chart since the domains will (presumably) be different. You can connect the two charts however you like, but again, I’ll describe my approach.
I created a selected class that is visually distinct from the normal dots on the scatterplot. In response to the brush event, I grab the brush’s extent (brush.extent()), and use that to create a filter. The extent returns a 2D array of the form [[x1,y1],[x2,y2]], where the xs and ys are on the respective data domains. I just select all of the circles and filter them based on where or not their x values and y values both fall within the extent. I then take the resulting selection and set the class to my selected class (of course before doing this, you probably want to grab all of the circles and remove the selected class otherwise you will acquire some extra ones if your resize the brush smaller). I also respond to brushstart and brushend events to clear the brush so I don’t leave the selection rectangle visible.
Create a simple HTML region that reports basic details about the dot currently under the cursor (basically a tool tip that stays fixed in place). At a minimum this should show the state and the four metrics you are displaying.
Replace the region above with a table that shows the information for all of the nodes currently selected by the brush.
Alternatively, create a table that lists data for all of the states and brush and link with the table as well (highlight rows corresponding to selected nodes and highlight nodes when table rows are clicked).
Hand this in as a single HTML file called username_hw5.html (if you need multiple files, you are welcome to make use of a zip files instead). Please add appropriate HTML text including your name, date, the assignment, and a label for each visualization. You are welcome to include additional explanatory text as you feel appropriate.
I would like this document turned in in the DROPBOX on MiddFiles. You can refer to the reference on the LIS wiki to help you connect to the file server.