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

Print - Admin





CS725 @ GitLab

Paper Presentations



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

Visualization Implementation 8

Due: November 17, 2017 before 8:30am

Note: This assignment is optional. Full completion of the assignment will be awarded EXTRA CREDIT.

The goal of this week's assignment is to demonstrate brushing and linking with 2 charts in D3.


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.


Create two charts in D3 where selection in one chart filters or affects data in the other chart. Your data must come either from your project or a previous VI or ICW. You may use brushing for selection (selecting a range) or just click or hover (selecting a single item).

Here's an example from Enrico Bertini's slides, where the user has selected the "Office Machines" bar in the bar chart:

This shows selection in a bar chart used to filter items in a scatterplot.

Other requirements:

  • Write a description of the process/code used to filter/affect what is displayed in the chart based on the selection.
  • Remember to include links to any examples or helpful tutorials that you used.


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

  • Click on VI8 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.