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

Print - Admin





Assignment Guidelines

CS725 @ GitLab

Paper Presentations

Project - updated


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

Visualization Implementation 1

Due: January 18, 2017 before 9:30am

The goal of this week's assignment is to get you set up for the rest of the semester. You'll explore git (and Gitlab), R, Tableau, and build a webpage that includes images and a simple D3 demo.

For this assignment only -- you may ask others in the class for help with these setup tasks.

Set up a webpage

To host webpages in your cs.odu.edu account, you must first have a CS account (this will be different than your ODU MIDAS account). If you do not yet have one, see https://accounts.cs.odu.edu/validate/ or contact the Systems Group (root@cs.odu.edu). You can verify that your account has been created by logging in at https://accounts.cs.odu.edu/

I assume that you are familiar with the Unix/Linux environment. If you are not, review the notes from CS 252 - Intro to Unix.

Login to an ODU-CS Linux machine at linux.cs.odu.edu using ssh. See the System Group's help pages on Unix and Linux Services and SSH Access for more information.

  1. Create a directory (or folder) named public_html in your CS Unix account
  2. Create a directory named cs725 under your ~/public_html/ directory
  3. Set appropriate permissions on the directories.
    • chmod 755 ~/public_html
    • chmod 755 ~/public_html/cs725
  4. Create an HTML file named index.html under ~/public_html/cs725
    • touch ~/public_html/cs725/index.html
    • chmod 644 ~/public_html/cs725/index.html
    • This file can remain blank. It prevents people from being able to browse your cs725 directory without knowing the exact URLs.

Now, any files that you put in your ~/public_html/cs725/ directory can be accessed on the web at http://www.cs.odu.edu/~username/cs725/filename

Git and Gitlab

Git is a version control system for tracking changes in source code. This is the same system that is used in the popular github code hosting platform. To get familiar with the basics of git, read git - the simple guide.

First, browse the Gitlab Help Pages. In particular, read the following:

Set up your first project

  • Follow the instructions at How to create a project in GitLab to create a new project named CS725-VI1
  • Create a README.md file (see Markdown) that includes your name, CS 725/825, Spring 2017
  • 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 images and 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).

The goal here is to allow you to build webpages that you can view at http://www.cs.odu.edu/~username/cs725/filename, but that are version-controlled in git using Gitlab.


  • Skim the tutorial at http://alignedleft.com/tutorials/d3
  • Create an HTML page for working through the tutorial in your CS725-VI1 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
  • Work through at least the "Adding Elements" steps in the tutorial


  • Download R (and optionally RStudio)
    • or, you can use R on the CS lab machines
  • Walk through the line charts section in the R tutorial (from ODU alum, Frank McCown) at http://www.harding.edu/fmccown/r/
  • Save a screenshot of the final line chart and add it to the index.html page in your CS725-VI1 project (that you created in the D3 step)
    • also include the R code used to generate the chart (either use the <pre> tags or get fancy and figure out how to generate HTML with RMarkdown)


  • Download Tableau Desktop (use http://www.tableau.com/tft/activation) and activate it with the code sent to the email list
    • or, you can use Tableau Desktop on the CS lab machines
  • Walk through the Get Started with Tableau Desktop tutorial
  • Save a screenshot of the final chart and add it to the index.html page in your CS725-VI1 project
    • also include a short description of your first impressions using Tableau

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