Due September 21 | CS 7450 - Information Visualization | Fall 2016 |
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).
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://www.youtube.com/watch?v=8jvoTV54nXw
- 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://sightlinevis.com/ -
many d3 examples
https://www.youtube.com/user/d3Vienno/videos?view=0&flow=grid
- many tutorial videos by d3Vienno
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://www.udacity.com/course/data-visualization-and-d3js--ud507
- d3.js
Udacity Course
http://bl.ocks.org/curran/3a68b0c81991e2e94b19
- Responsive
Visualizations (Resizing)
http://bl.ocks.org/hubgit/raw/9133448/
- Nesting
CSV Data
http://bost.ocks.org/mike/nest/
- Nesting
Visualization Elements
http://www.visualcinnamon.com/blog
- Creative
Tutorials from Nadieh Bremer