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 1

Due: September 8, 2017 before 8: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), D3, 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 your ODU CS webspace

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 -- If you are unfamiliar with the chmod command, please review the CS 252 file protection notes.
    • 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, Fall 2017
  • 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 CS725-VI1 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.

Solution Webpage

  • Create an HTML page named index.html for your VI solution in your CS725-VI1 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.
    • make sure that images included are scaled appropriately for a typical browser size
    • when scaling images in the HTML, keep the aspect ratio the same (that is, only specify "height" or "width", but not both)
    • 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, should be something like http://www.cs.odu.edu/~username/cs725/CS725-VI1/, to your project README.md.

D3

  • First read through the UW Interactive Data Lab's D3 Technology Fundamentals slides (HTML, DOM, CSS, SVG, JavaScript)
    • note the arrows in the bottom right corner of the slides -- you can get additional information on a topic by clicking the down arrow and move to the next topic with the right arrow
    • note that the pages that have HTML/CSS/JS/Result tabs are clickable so you can see the various parts required to build the example
    • clicking on the 'Edit' button will take you to an live and editable example at codepen.io
  • Also review the Basic Building Blocks page from DashingD3js.com, especially to the Web Inspector section at the bottom.
  • Continue with D3.js First Steps
  • Work through Adding a DOM Element and Adding an SVG Element
    • In the D3.js Legibility section, use Shift+Enter to enter multi-line commands in the Console
  • Continue working through the examples of Binding Data to DOM Elements, Using Data Bound to DOM Elements, and finally Creating SVG Elements Based on Data
    • Note that the responses you see in the console may not be exactly the same as on the webpage, due to Chrome version differences
    • In the last section of Creating SVG Elements Based on Data, "Styling SVG Elements Based on Data", take a screenshot of your Chrome browser that shows the rendered page, Elements tab (w/expanded HTML showing the <svg> and <circles> tags), and JavaScript Console window showing the circleAttributes variable.

What to put on your solution webpage

  • Chrome screenshot image from "Styling SVG Elements Based on Data"
  • SVG/D3 code in the webpage so that the final example with the colored circles appear (not as an image)
  • Description in your own words of how this final example works.

R

  • 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/
  • Generate both the PNG and PDF versions of the line charts as in the tutorial.
  • Not required, but you're strongly encouraged to also walk through Getting Started with Charts in R

What to put on your solution webpage

  • Chart PNG generated by R
  • Link to the PDF generated by R
  • Description in your own words of how the PNG example works, including what the parameters to the various functions mean.

Tableau

What to put on your solution webpage

  • Chart image generated by Tableau
  • Description in your own words of your first impressions using Tableau

Submission

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

  • Click on VI1 under Visualization Implementations
  • Under "Assignment Submission", click the "Write Submission" button.
  • Copy/paste the working URL of your webpage (should be something like http://www.cs.odu.edu/~username/cs725/CS725-VI1/) 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 (should be something like https://git-community.cs.odu.edu/username/CS725-VI1) 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.