Goals

Use different visualization tools, including Tableau, Vega-Lite, and Data-Driven Documents (D3), to create a stacked bar chart.

Instructions

You will need to complete this assignment in three different parts. You may complete the assignment in a single HTML file or use multiple files (e.g. one for CSS, one for HTML, and one for JavaScript). You must use Tableau, Vega-Lite, and D3 v4 for this assignment. All D3 visualization should be done using D3 v4 calls. You may use other libraries (e.g. lodash) as long as they are not used to construct or modify SVGs, but you must credit them in the HTML file you turn in. Tableau offers video tutorials, and Vega-Lite has good documentation plus a number of examples. For D3, there is extensive documentation available as well as examples, and Vadim Ogievetsky's example-based introduction that we went through in class is also a useful reference. In addition, Scott Murray's Interactive Data Visualization for the Web is a good way to learn D3.

Due Date

The assignment is due at 11:59pm Friday, February 23.

Submission

You should submit any files required for this assignment on myCourses. You need to submit at least three files (a2.twb, a2-vega-lite.json, and a2.html), and you may choose to also submit separate CSS and JavaScript files. Note that those files should be linked to the main HTML document accordingly. The filename of the main HTML document should be a2.html. myCourses may complain about the files; if so, please zip the files and submit the zip file instead.

Details

For this assignment, we will use Citibike System Data from January 2018. This assignment has been preprocessed and organized into a comma separated values (CSV) file with three columns: day: the day of the month, decade: an age range indicated by the starting number (e.g. 50 means 50-59, 20 means 20-29), and count: the number of people of the given decade who used a bike on the specified day. Note that decade is -1 if the decade is unknown. The data is available here:

https://cdn.rawgit.com/dakoop/3342a08ffaa77fef31c4cca759e6846d/raw/a1c8efbf0d29ee8fd693ff82f6fc95ff913a339f/citibike-jan2018.csv

0. Info

Like Assignment 1, start by creating an HTML web page with the title "Assignment 2". It should contain the following text:

  • Your name
  • Your student id
  • The course title ("Data Visualization (DSC 530/CIS 602-01)"), and
  • The assignment title ("Assignment 2")
  • The text "This assignment is all my own work. I did not copy the code from any other source." (Your inclusion of this text indicates that you understand the consequences of violating the UMass Dartmouth Student Academic Integrity Policy.)

If you used any additional JavaScript libraries, please append a note indicating their usage to the text above (e.g. "I used the jQuery library to write callback functions.") Include links to the libraries used. You do not need to adhere to any particular style for this text, but I would suggest using headings to separate the sections of the assignment.

For each tool, we will be creating the same visualization. The visualization should show each day of the month along the x-axis and a bar showing the total number of Citibike trips for each day. That bar should be split into subunits for each decade, and each decade receives its own color. Provide a legend describing which colors map to which age range.

1. Tableau (20 points)

Download Tableau Desktop and register here to receive a free academic license. You may work before your license arrives using a 30-day trial. Load the csv file and create a stacked bar.

Example Solution for Tableau

Example Solution for Tableau

Hints
  • You may need to treat one of the measures as a dimension
  • Think about what colors to use. We will discuss this design choice more later in the course.

2. Vega-Lite (30 points)

Use the online editor to build a JSON representation that describes the stacked bar chart. It may useful to look at the tutorial and examples. Turn in the full JSON specification you create.

Example Solution for Vega-Lite

Example Solution for Vega-Lite

Hints
  • You can load the data directly into the Vega-Lite editor using the url specified above
  • The aggregate field may be useful for the y value
  • Watch out for the order of days. You may wish to look into the format.parse part of the url specification.

3. D3 (50 points)

Create a vertical stacked bar chart, similar to Part 3b of Assignment 1 but using D3. You should draw both an x-axis and a y-axis and label them. Also, add a legend that indicates the relationship between the bar components and the colors.

You will need some boilerplate code that I have provided in the templates here: html and js (right-click and save). The code loads the data (via the d3.csv call) and then transforms it (in the d3.nest call) from each data item having "day", "decade", and "count" attributes to a format where each data item has "day", 10, 20, 30, ..., 130 attributes where the 10,...,130 attributes store the counts of the number of bike trips of people whose age was in that decade. This helps when trying to stack the data.

Example Solution for D3 (without required legend)

Example Solution for D3 (without required legend)

Hints
  • d3.scaleBand is useful for bar charts
  • D3 has routines (e.g. d3.axisLeft) to build an axis given a scale
  • A group element with a transform can help shift the entire visualization so that labels or axes have space
  • d3.stack should be useful here. Check how the keys function works with the stack
  • If you use d3.stack, you will need nested selections (do not worry if elements are not grouped as bars)
  • You may need to load d3-scale-chromatic to find an appropriate color scheme.