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

Print - Admin






CS725 @ GitLab

Paper Presentations

Homework 1

Due: January 17, 2018 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) and D3 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/

If you are new to ODU-CS, you will also need to make sure that your @cs.odu.edu email account is setup (see CS Systems Group's Email Services)

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 world-readable 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-HW1
  • Create a README.md file (see Markdown) that includes your name, CS 725/825, Spring 2018
  • 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-HW1 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.

You are strongly encouraged to develop using the Gitlab environment (either through their UI or through Unix), instead of developing on your local machine. This will enable you to take advantage of the version control available through git.

Solution Webpage

Create an HTML page named index.html for your HW solution in your CS725-HW1 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
  • use headings, paragraphs, and appropriate spacing to ensure that the text is easy-to-read

Add the URL of your solution webpage (something like http://www.cs.odu.edu/~username/cs725/CS725-HW1/) to your project README.md.


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

  • Download http://d3js.org/d3.v4.min.js and save it into your CS725-HW1 project folder
  • Replace d3.v2.min.js with d3.v4.min.js in the tutorial

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 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":

  • change the circle radii and colors from what is given in the example -- the goal here is to experiment with changing settings and creating a unique bullseye image
  • 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.

The final section to work through is Using the SVG Coordinate Space. After you have worked through the full example, make the following changes:

  • change the values in the spaceCircles dataset to change the position of the circles -- think about how you could change both the x and y values
  • change the colors used for the circles

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 your modified example from "Styling SVG Elements Based on Data" appears (not as an image)
    • Note that the examples insert the code into the webpage using the JS Console, but you'll need to save the code either into a JavaScript file or HTML file
  • SVG/D3 code in the webpage so that your modified example from "Using the SVG Coordinate Space" appears (not as an image)
  • Descriptions in your own words of how these two examples work. Include in your description an explanation of how the SVG coordinate system differs from a typical math coordinate system.
  • Include links to any examples that you used in completing this assignment (including the tutorial examples that are given here -- this will help you get into the habit of including such references).

For a walkthrough of how to include two SVG/D3 elements on a single webpage, see Arranging more than one d3.js graph on a web page.


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

  • Click on HW1 under Homeworks
  • 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-HW1/) 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-HW1) 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.