CS 725/825 - Information Visualization
Spring 2017: Wednesdays, 9:30am-12:15pm, E&CS 2120

Print - Admin

Home

Staff

Syllabus

Schedule
  Objectives

Assignment Guidelines

Blackboard
CS725 @ GitLab
WebEx

Paper Presentations

Project - updated

Links


Tableau's data visualization software is provided through the Tableau for Teaching program.

Visualization Implementation 5

Contents (hide)

See http://www.cs.odu.edu/~mweigle/CS725-S17/Guidelines for general information on VI assignments.

Of special note for this assignment:
Visualization is in a large sense about design and the individual design decisions that are made. No matter how simple, it is rare that two charts developed independently will look exactly the same or have identical stylings. Group work on VI assignments is not acceptable. Do not start with someone else's solution and make changes -- this is easy to detect.

Another note: This is the last VI until after Spring Break.

Due: February 15, 2017 before 9:30am

The goal of this week's assignment is to demonstrate the creation of several visualization idioms using your favorite JavaScript library.

Setup

  • Follow the instructions at How to create a project in GitLab to create a new project named CS725-VI5
  • Create a README.md file (see Markdown) that includes your name, CS 725/825, Spring 2017. You must also put a link to your solution webpage here.
  • Make your project 'Private', but add me (mweigle) as a 'Reporter'
  • Follow the instructions on Command Line basic commands page (through "Go into a project, directory or file to work in it") to clone your project in your ~/public_html/cs725/ directory in your ODU-CS account.
  • Create an index.html page for displaying your work in your CS725-VI5 project

As you make updates, make sure that the version in your local repository (in your ODU-CS account) is up-to-date with the remote repository (in Gitlab).

  • if you are working in your ODU-CS Unix account, as you make changes, be sure to commit changes and push them back to the remote repository
  • if you are working in Gitlab, make sure to go into your ODU-CS Unix account and pull the changes from the remote repository

Task

Use some dataset (something we've already used, a sample from your project data, or something entirely different) to create charts using the following idioms:

  • vertical bar chart
  • horizontal bar chart
  • line chart
  • scatterplot
  • stacked bar chart

Bonus:

  • heatmap
  • scatterplot matrix

Your charts must be generated using some web-based JavaScript library. You may use D3, NVD3, Vega-Lite, or another JS library (with my approval).

All charts must be created from the same dataset (though, of course not all showing the exact same attributes). The idiom must be appropriate for the data types that are visualized. All of the charts must have appropriate titles and axes labels.

You may put all of the charts on a single webpage, or you may separate them out -- as long as I can easily navigate from one page to the others.

In your project README.md file, include the following notes:

  • links to online resources consulted
  • lessons learned
  • comments on which of the idioms was the easiest or most difficult to implement

Submission: Submit the URL of your webpage in Blackboard (under "Visualization Implementations" > VI5).