From CS 725/825 Spring 2018

CS725-S18: Homework 3

Contents (hide)

Due: January 31, 2018 before 9:30am

The goal of this week's assignment is to explore marks and channels using D3 and Blockbuilder.

Setup

This week's homework will be done in BlockBuilder. All you need is a GitHub account (not GitLab this time, but the real GitHub) and to ensure that you can create gists (http://gist.github.com) associated with your GitHub account. See the email I sent to the class list on Jan 20 for more information on setup.

You may find the bar height example (pdf) we'll discuss in class helpful.

Coding

You will be editing a D3 bar chart and a D3 scatterplot to experiment with different channels.

Bar Chart

Fork the "S18 - HW3 - Bar Chart" block that I've created at http://blockbuilder.org/weiglemc/eda81fbb0af9c2de3ca5fccd3943b0e2. There are two almost identical bar charts in this block. The charts show the frequency of the usage of letters in the English language. The bars in the top one are "steelblue" and the bars in the bottom one are "teal".

Edit the README.md in your new forked block and answer these questions:

  1. What is the type of mark used in the bar chart?
  2. List the channels, the attribute they are mapped to, and the data type of that attribute.

Edit the top chart to use the color hue channel to express the letter attribute. You will need to look at the d3 Color Scales links on the class Links page. Hint: This isn't a one-line change -- you have to setup a color scale and then apply it to the bars based on the appropriate value.

Add the answer to this question to your README.md:

  1. After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.

Edit the bottom chart to use the color saturation channel to express the frequency attribute.

Add the answer to this question to your README.md:

  1. After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.List all of the channels mapped to the frequency attribute.

Scatterplot

Fork the "S18 - HW3 - Scatterplot" block that I've created at http://blockbuilder.org/weiglemc/703997367b85521e76d3fdd64c3c7b5f. The scatterplot shows NCAA football statistics from 2014. The current chart shows the number of passing touchdowns (TDs) vs. the number of rushing TDs for each NCAA Division I quarterback. Tooltips are used to provide additional information about each quarterback.

Edit the README.md in your new forked block and answer these questions:

  1. What is the type of mark used in the scatterplot?
  2. List the channels, the attribute they are mapped to, and the data type of that attribute.

Edit the chart to use the color hue channel to express the "Conf" attribute (there are 11 conferences) and use the size channel to express another attribute in the dataset.

Add the answer to this question to your README.md:

  1. After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.

Extra Credit: Add a color legend to the chart.

Submission

Submit the bl.ocks.org (not blockbuilder) URLs of your solutions in Blackboard

Retrieved from https://www.cs.odu.edu/~mweigle/CS725-S18/HW3
Page last modified on January 23, 2018, at 11:26 AM