CS 725/825 - Information Visualization
Fall 2017: Fridays, 8:30-11:00am, E&CS 2120

Print - Admin

Home

Staff

Syllabus

Schedule
  Objectives

Blackboard
CS725 @ GitLab

Paper Presentations

Project

Links


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

Visualization Implementation 3

Due: September 22, 2017 before 8:30am

The goal of this week's assignment is to build a line chart and a bar chart using the AidData Example we considered in ICW1.

Setup

Create your project

  • Follow the instructions at How to create a project in GitLab to create a new project.
  • Create a README.md file (see Markdown) that includes your name, CS 725/825, Fall 2017.
  • Make your project 'Private', but add me (mweigle) as a Reporter on your project -- if this step is not done, I will not be able to grade your assignment
  • 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.

For the rest of this assignment, you'll add files to this new project. You may add the files either through the Gitlab webpages or through the command-line (refer back to git - the simple guide). Just make sure that the version in your local repository (in your ODU-CS account) is up-to-date with the remote repository (in Gitlab).

Solution Webpage

  • Create an HTML page named index.html for your VI solution in your new gitlab project
    • 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
  • Your solution webpage does not need to be fancy, but it at least should look neat and professional.
    • proof-read any text that you write to remove spelling and grammar mistakes
  • Include the URLs of any examples that you use in completing the assignment.
  • Add the URL of this webpage to your gitlab project README.md.

Charts

Copy the AidData example data into a separate spreadsheet. Use your list of questions from ICW1 to transform the data so that it can be charted as a line chart and as a bar chart. You may need to create separate spreadsheets for each. Make sure that some of the data you want to show makes sense to be shown as a line chart and some as a bar chart.

Transform your data as needed and plan out your charts before you start coding. Save your data files as either CSV or JSON and upload them to your gitlab project.

Coding

Use either Vega-Lite (built by the developers of D3) or NVD3 to generate both a line chart and a bar chart.

Other requirements:

  • Both of your charts must appear on the same webpage.
  • For each chart, write an explanation of what the chart shows and point out any interesting insights.
  • Write a few comments on the library that you chose to use. How difficult was it to get started and understand how the charts should be constructed?
  • Remember to include links to any examples or helpful tutorials that you used.

Here are some links that you might find helpful:

Submission

Submit the URLs of your solution webpage and Gitlab project in Blackboard

  • Click on VI3 under Visualization Implementations
  • Under "Assignment Submission", click the "Write Submission" button.
  • Copy/paste the working URL of your webpage into the edit box.
    • make the link clickable -- copy the URL and click the Insert Link button (icon looks like a link in a chain). Paste the URL into the "Link Path" textbox
  • On the next line, copy/paste the URL of your project into the edit box and make the link clickable
  • Double-check your links to make sure that they are working properly.
  • Make sure to "Submit" your assignment.