CS 725/825 - Information Visualization
Spring 2019: Wednesdays, 9:30am-12:15pm, Dragas 1102

Home

Staff

Syllabus

Schedule
  summary
  objectives
  this week

Links

Blackboard
Paper Presentations

Project

Homework 4

Due: February 13, 2019 before 9:30am

The goal of this week's assignment is to build a bar chart and a scatterplot in D3.v5 (must use version 5) using the University data we considered in ICW1 and HW2.

Setup

This week's homework will be done using BlockBuilder (and thus bl.ocks.org and gist.github.com). You will be creating two charts, a bar chart and a scatterplot (with tooltips). You can put these in the same block (similar to HW3) or you may put them in separate blocks.

Charts

Start with your cleaned University data from HW2 and consider your list of questions from ICW1. Find at least one question that can be effectively answered with a bar chart and one that can be effectively answered with a scatterplot. You may come up with different questions than in ICW1. You may need to further clean or filter the data and create separate files for each chart.

Make sure to do some sanity checks on the data (all of this comes from Wikipedia, so you can use that as a source). Note that there are some entries for university "systems", like all of the University of California universities (including Berkeley, Santa Clara, Santa Cruz, etc.). You may need to make the decision to remove them from your dataset.

I encourage you to aggregate or reduce your data in some way rather than trying to show data for every university listed in the datafile. Your chart should be displayable in a typical browser window without scrolling.

Transform your data as needed and plan out your charts before you start coding.

Coding

Use D3.v5 to generate a bar chart and a scatterplot. Your charts must have labeled axes. Your scatterplot must include tooltips that provide additional information about the data item plotted.

In the README.md of each block:

  • list the marks/channels used and the data/attributes they map to
  • write an explanation of what the chart shows
  • point out 1-2 interesting insights (i.e., things you learned from the chart)
  • include links to any examples or helpful tutorials that you used

In Blackboard, write a description on your experiences getting started and building your own charts with D3 (this should go in the edit box where you submit the links to your blocks).

When you start coding, make your blocks private by clicking the padlock icon. Note that you can't lock blocks that you have forked, but you can lock blocks that you created yourself. After you have submitted, be sure to make your blocks public so that I can grade them.

Extra credit: Create a line chart using appropriate data.

Helpful tutorials/links

Remember that there are more D3 links and tutorials (and the D3.v5 Changes document) on the Links page.

Submission

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

  • Click on HW4 under Homeworks
  • Under "Assignment Submission", click the "Write Submission" button.
  • Copy/paste the working URLs of your bl.ocks.org webpages into the edit box and make the links clickable. Make sure to indicate which is your bar chart and which is your scatterplot.
    • double-check your links to make sure that they are working properly
  • Add your description of getting started with D3.
  • Make sure to "Submit" your assignment.