Last Build: 05/16/19 3:39pm

Data Visualization

CS 360/560 • Spring 2019

Homework 4

For this homework assignment, you must visualize the data from the Fire Department Calls for Service dataset using hierarchical data visualization techniques in D3 version 5. You must perform some data wrangling for this assignment to transform the data into a hierarchical format.

This guide details the requirements for this homework assignment. See the Homework Submission and Homework Feedback guides for other requirements.

Associated Assignments Homework 4
Homework 4 Feedback

Dataset

The Fire Department Calls for Service dataset can be viewed and downloaded from:

https://data.sfgov.org/Public-Safety/Fire-Department-Calls-for-Service/nuek-vuh3

However, the dataset is not hierarchical. Students must decide how to form a hierarchy from this dataset such that:

  • The hierarchy must have height 3 or higher (i.e. at least 3 levels, including root and leaves).

  • Each leaf node must have an attribute associated with it.

This hierarchy could be formed using dates (year, month, day), regions (supervisor district, zip code, etc.), and categories (call type group, call types, etc.). Node attributes could be the count of unique incident numbers associated with the node, average or median response time, and so on. It also looks like the SF zip code boundaries dataset has population and area information associated with each zip code, which can be used to calculate per-capita or per-square mile metrics.

Any tool or language may be used to wrangle the dataset, including the SF Data interface itself. Specifically, students can use the “Filter” » “Sort & Roll-Up” » “Roll-Ups & Drill-Downs” functionality to start building a hierarchy from the dataset.

Students should also filter the data, but the exact filter depends on the hierarchy formed. For example if the hierarchy is formed by region or category, it might make sense to filter by date. However, if the hierarchy is formed by date, then it might make sense to filter by region or category.

Grading

The grade for this homework will be broken down as follows:

Letter Requirement
D Data wrangling into a hierarchical format.
C D-level requirements plus implement one node/link diagram in D3v5.
B C-level requirements plus implement one space filling or enclosure visualization in D3v5.
A B-level requirements except one technique must use polar coordinates.

See the requirements below and the Homework Grading section for more details.

Requirements

Create one image (or SVG) visualization. The visualization should be no more than 960 pixels wide (maximum) and should be at least 500 pixels tall (minimum).

See below for the detailed requirements for each letter grade level.

Base Level Functionality

The base letter grade will be determined as follows:

  • D Level: Successfully wrangle the data into a hierarchical format that can be interpreted by either d3.hierarchy() or d3.stratify(). The hierarchy must have height 3 or more (i.e. at least 3 levels including the root and leaf nodes) and each leaf node must have an attribute.

  • C Level: Complete the D-level functionality and implement a node link visualization using d3.cluster() or d3.tree() and any edge layout/style. The node attribute must be encoded somehow (i.e. using color, size, shape, etc.). Nodes must have a minimum details-on-demand interactivity showing the node label.

  • B Level: Complete the C-level functionality and implement a space-filling or enclosure visualization using d3.partition(), d3.treemap(), or d3.pack(). The node attribute must be encoded somehow (i.e. using color, size, shape, etc.). Nodes must have a minimum details-on-demand interactivity showing the node label.

  • A Level: Complete the B-level functionality and implement at least one technique using polar coordinates. The allowable techniques are: a radial/circular dendogram, a radial/circular traditional tree layout, or a sunburst. (Circle packing does not use polar coordinates.)

See the details below for how minus, normal, and plus letter grades will be assigned.

Plus/Minus Functionality

The base level functionality will determine whether you earn an A, B, C, or D base letter grade. However, the following will determine whether you earn a minus, normal, or plus letter grade.

To earn a minus letter grade (D-, C-, B-, or A-), you must complete ALL of the following:

  • Properly submit a visualization on time meeting the minimum requirements.

  • No matter which technique is used, nodes must have a minimum details-on-demand interactivity showing the node label.

  • Include a 1 paragraph (3-5 sentence) writeup about how to interpret your visualization.

To earn a normal letter grade (D, C, B, or A), you must complete the minus requirements above and ALL of the following:

  • Include the context necessary to interpret your visualization, including color and/or size legends, titles, and annotations (if appropriate).

  • When hovering over a node in a node/link visualization, highlight or brush the nodes and the edges that form the shortest path to the root node.

  • Include a 1 paragraph (3-5 sentence) writeup about what you can learn about that data from your visualizations.

To earn a plus letter grade (D+, C+, B+, or A+), you must complete the normal and minus requirements above and ONE of the following:

  • Automatically label nodes if space is available.

  • Add advanced interactivity, such as filtering, collapsing, or zooming. See the d3-hierarchy notebook collection for examples. It is allowable to use HTML form controls for this interactivity.

The goal is to have a single professional webpage that provides users all the context necessary to understand the data being visualized. Think about a professional blog post, or even a newspaper/magazine article!