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 7

Due: November 3, 2017 before 8:30am

The goal of this week's assignment is to build an interactive component in a D3 chart.

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.

Coding

Take one of your charts from a previous D3 assignment or your project and implement some form of filtering/selection using a standard UI element (slider, dropdown, button, ...). If you choose something like a drop-down, make the filter action happen on the item selection. That is, don't require the user to click a separate 'Submit' button before the chart updates.

You may want to choose your chart carefully -- VI8 will be an extension of this and will ask you to create 2 charts related to your data and use a selection in one chart to filter data in the other chart.

Other requirements:

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

Here are several examples:

Submission

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

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