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.

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).

1. You can choose to generate the 4 sets of summary stats in an Excel file. 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 using D3. 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)
The csv file contains data items with eight attributes in comma-separated-value format. The data file has column headers, so the data should be relatively self explanatory. Do not treat date as an ordinal attribute for the height of the bars.

 
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
http://data-analytics.github.io/ - many d3 examples
https://www.youtube.com/user/d3Vienno/videos?view=0&flow=grid - many tutorial videos by d3Vienno
http://zeroviscosity.com/category/d3-js-step-by-step - series of examples about d3
http://www.cs171.org/2015/resources/ - list of d3 resources from Harvard CS 171 class
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.