Assignment 3

1. Tableau (25 points)

Either use Tableau Public or download Tableau Desktop and register here to receive a free academic license (You may work before your license arrives using a 14-day trial). Load the CSV file and create a stacked bar chart. If you are using Tableau Public, make sure the publish your visualization (required to save it), and put a link and image in your notebook/web page. To download an image, click the download button() on the current sheet. You can include the image in a notebook by uploading it as a FileAttachment to Observable, or you can add it to a web page using the standard img tag. If you are using Tableau Desktop and wish to turn in the workbook (.twb file), you may also do that, but put an image in your notebook/web page and a note about the twb file.

2. Observable Plot (30 points)

Observable notebooks automatically import the d3 and Plot libraries so you can use them directly. However, if you are using another tool for this assignment, make sure to include these two libraries. See the documentation about how to include them, specifically about how to use them in vanilla HTML or as a UMD bundle. To load the data, use d3.csv which can load the data from the URL above. Note that converting the data types after reading the csv or using D3’s autoType functionality when loading will help avoid parseInt calls later on. Note, however, that parsing the date will likely require a call to d3.isoParse. You do not need to match the colors in the example solution, but you should make sure that your colors are in the same order for each month. Check the margins and make sure you have a legend.

You may choose to either bin the data using Plot’s bin transform, or use the code from Part 3 to aggregate the data by year-month, and then use Plot.

3. D3 (30/45 points)

In this part of the assignment, use D3 to create the same (stacked) bar chart. CS 490 students need only create a bar chart showing the totals per month with appropriate axes and labels, but CS 627 students should create the stacked version with a legend. For both parts, we will need the data to be organized differently (by month). You can use the following code which assumes your original data is stored in crashes:

crashesMonthType = d3.rollup(crashes, v => v.length, d => (d.CRASH_DATE.getFullYear() + '-' + (d.CRASH_DATE.getMonth() + 1).toString().padStart(2,0)), d => d.FIRST_CRASH_TYPE);
crashesByMonth = [...crashesMonthType.entries()].map(d => ({...Object.fromEntries([...d[1].entries()]), "Total": d3.sum(d[1].values()), "Date": d[0]}))

This groups the crashes by a string YYYY-mm, adds the total number of crashes (Total), and includes entries for each crash type where the key is the crash type, and the value is the number of crashes of that type. CS 490 students can then access the values from the Total attribute.

For CS 627 students, it may be easier to first create a non-stacked bar chart (use the provided method above), and then try the stacked version. The axes and labels should be similar to Part 2. The stacked version should have a legend that indicates the relationship between the bar components and the colors. This legend can be created using the Swatches code in this notebook. In Observable, you can do

import {Swatches} from "@d3/color-legend"

in one cell and then pass your color scale (color) to Swatches, appending to another d3 selection divElt as follows:

const swatches = Swatches(color);
divElt.append(() => swatches)

Note that you’ll want to create a div that holds the SVG and the swatches if you take this approach.

Extra Credit

• CS 490 students may complete the stacked version in D3 for extra credit
• (15 pts) Create a stacked bar chart of the data using Vega-Lite. You can include this in an Observable Notebook or a webpage using the Vega-Lite API.
• (15 pts) Create a stacked bar chart of the data using matplotlib. Turn in the python code and the generated image as a separate file.