From CS 725/825 Spring 2018

CS725-S18: Homework 1

Contents (hide)

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

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

Your solution webpage does not need to be fancy, but it at least should look neat and professional:

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

D3

First read through the UW Interactive Data Lab's D3 Technology Fundamentals slides (HTML, DOM, CSS, SVG, JavaScript)

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

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

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

What to put on your solution webpage

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.

Submission

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

Retrieved from http://www.cs.odu.edu/~mweigle/CS725-S18/HW1
Page last modified on January 07, 2018, at 03:10 PM