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. The in-class tutorial slides can be found here as well.

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 region, and for the y-axis, say profit, 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).

1. You can choose to generate the 4 sets of summary stats perhaps with Excel. The 4 sets would be sum of sales by region, sum of profits by region, sum of sales by category, and sum of profits by category. You can create four csv files with those values and use that as input for the different views. If you do this, you can still earn a total of 10 points should your program work correctly.
2. You can choose to generate the 4 sets of summation stats directly in javascript. If you do this, a correct implementation would give you 2 extra credit points as a bonus.

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://chimera.labs.oreilly.com/books/1230000000345 - thorough d3 tutorials from the OReilly book, "Interactive Data Visualizations for the Web"
https://github.com/mbostock/d3/wiki/Tutorials - big list of resources from the author of D3
http://bost.ocks.org/mike/bar/ - Bar chart tutorials by the author of D3
http://bl.ocks.org/mbostock - D3 visualization examples by 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.