Week 1 Assignment

Here are local server instructions for the PC

Hi and welcome!

The assignment for this first week consist of getting to know and setting up the different pieces of the environment that we need to start writing code and testing our visualizations on the web. Please complete all the steps as this will ensure we get off to a good start.

Using the D3 reference accessible as a Ebook through the library here:
Interactive Data Visualization for the Web : An Introduction to Designing with D3
2nd Edition 2017
by Scott Murray

1. Read Chapters 1–2 which introduces data visualization on the web and the d3 library.
2. Starting with Chapter 3, Page 17, if you are not familiar with using HTML, CSS, and the console, please read this chapter and note the key concepts. By the end of this chapter you should know the basics of HTML, Classes, IDs, CSS, using Developer Tools in the browser, what javascript looks like, and what an SVG is. It is a lot, but we will be reviewing all this content in class throughout the semester.
3. Use Chapter 4 as a reference for the steps we took in class to setup our files and local server. The instructions in the book will differ a little from class and below because we are using a different code base, but the same idea and steps of organizing your folder and starting the server applies. We will be using the terminal with Python. By now you may have a vague memory of the steps below as I have demonstrated them in class.
   note: if you are experienced in this sort of thing and do not need to read the lengthy detailed steps below. Simply download the class repo, start a local server, navigate to chapter 4’s mazeToTree.html in your browser. Take a screenshot of that entire window with url visible and submit the image as week1_yourlastname_yourfirstname.png to Canvas.

3a. Download and install a simple text editor of any kind. There are many good ones out there, and you may already have a favorite that you can use for class. For demonstration purposes, I will be using textMate, a very basic and free text editor for Mac. Here is a great text editor option for windows: https://atom.io/

3b. Download the class folder here: class files as a zip file by going to the repository on github, and clicking the green “Code” button, then selecting “Download ZIP”

3c. Unzip the folder and place somewhere you can reference later. I have placed my unzipped class folder in “Documents” as it is highlighted below

3d. Open the class folder in your text editor, you can see the files and subfolders to the right in the file browser. If you do not, you can go to “View” and select “Show File Browser”. This is specific to TextMate, but all text editors will have a similar setting in view.

The following steps are written by our TA Adeline Chum and will show her username in the terminal.

3e. Type “Command Prompt” in the start menu search bar and open up this app. You will see this new window below. Notice the last line where the cursor is always indicates where you are in terms of your file structure. Here, the default is in the C:\Users\Adeline Chum

3f. To change to the correct drive and navigate to where you have saved your class folder, type “cd” meaning change directory followed by “/d” to change the drive, then type the drive you want to go to. In my case it is “g:”.

Then repeating this process to go to the class folder, type “cd” and the location of your folder within the drive.

3g. Start the server. The command to start the server will vary depending on the version of python you have. For python 2.X type in “python -m SimpleHTTPServer”. Below, I have shown how to create a simple server for Python 3.X. Type in “python3 -m http.server”.

Some addition commands:
To exit out of a command, hold down Ctrl +C

To refresh the page or change the local port number, type in the steps given in 3g (“python3 -m http.server”) followed by the new port number.

3h. Now we are set up to view d3 code! Let’s test it out. Open your web browser. I am using chrome here, but safari and firefox as well as any browser that is not Internet Explorer will work for our purposes. I can direct my browser to the local server, which is http://localhost:8000/ in my case. If you did indicate port 8888 or 8001 in the previous step, or you are assigned a different port, direct your browser to the correct one by replacing 8000 with your port number. Your browser window should show a list of files which match those in the file browser of your text editor.

Your browser and your text editor opened to the same class files folder

3i. This is always our starting point. Now that we are all set, let’s try out some of the files. Click to open “chapter_04/” in both the browser and your text editor. You will see the 2 html files in the chapter 4 folder as in the images below.

Your browser and your text editor opened to the same folder

If you click on the first file called “blank.html”, you will see this pair of images below. The left shows a line of text. On the right you can see the corresponding text in the code itself.

Your browser and your text editor opened to blank.html

Now let’s go back and open the second file called “mazeToTree.html”. Hopefully you see some d3 code in your text editor, and the familiar animation of a maze to a tree in your browser similar to below.

Your browser and your text editor opened to mazeToTree.html

3j. That’s it for our setup.
Save and submit a screenshot and you are done!!!

Please take a screenshot of the entire window of your browser, with the URL visible and showing something similar to screenshot below.

Save this screenshot as week1_zhang_jia.png, replacing my last and first name with yours. Submit the image to Canvas before midnight on Thursday.