Due September 30 | CS 7450 - Information Visualization | Fall 2013 |
We understand that some students in class do not have a programming background. Hence, we will provide tutorials to assist on the assignment both in class and outside class. In addition, the bottom of this assignment contains a list of D3 resources that may be helpful. Chad Stolper's tutorial slides can be found here as well. You can also find Ramik's scatterplot example from Monday's class.
To begin, we have created a skeleton or template of the assignment for you to start with. It is available at: runnable template and code for template. The visualization shown in the template consists of two drop downs and an update button. Once the user chooses an attribute to show on the x-axis, say profit, and for the y-axis, say region, clicking on the update button should show a barchart with accumulated sum of profits over the different regions.
The following video shows what a correct final version of the assignment should look like, and it will help you understand what you need to implement. (Solution demo video)
Grading: The assignment will be graded out of a total of 10 points. There are two options for how you handle aggregation of the individual data values (this is one of the trickier aspects of D3 programming).
Submitting your assignment: We will use t-square to submit the code for the assignment. It is due at the start of class on the due date. More details about the submission procedure will be given in class.
Coffee sales data (csv format)
D3 resources
http://vimeo.com/m/35005701 - nice overview and run-through video/talk
http://alignedleft.com/tutorials/d3/
- thorough d3 tutorials from an academic instructor and the author of the open
OReilly book, "Interactive Data Visualization for the Web" (look for
free preview link for the actual book draft
https://github.com/mbostock/d3/wiki/Tutorials - big list of resources
from the author of D3
https://github.com/mbostock/d3/wiki/API-Reference
- well-done D3 documentation
http://www.d3noob.org - free ebook
with lots of tips and tricks, actively updated
http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf
- cheat sheet for D3, also see parent site for blog posts
https://groups.google.com/forum/?fromgroups=#!forum/d3-js - D3 Google
group
http://bost.ocks.org/mike/selection/
- Guide to understanding selections, key part of D3.
http://benclinkinbeard.com/talks/2012/NCDevCon/
- A talk, with interactive examples
and code snippets, explaining d3
http://enjalot.github.com/dot-enter/ - A live-coding set of videos to walk through a lot of the basics
http://enjalot.github.com/dot-append/ - A live-coding set of videos to walk through a lot of the basics (part 2)
http://tributary.io/ - A fast prototyping lounge similar to CodePen to let you test your ideas out. Used by the enjalot fellow.