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
- Read Chapters 1–2 which introduces data visualization on the web and the d3 library.
- 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.
- 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.
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.
3e. Open the terminal. I am on a mac, and I can simply type “terminal” in to spotlight. You will see this new terminal window below. Notice that the last line where the cursor is always indicates where you are in terms of your file structure. Now, upon opening the terminal for the first time, I am in my user account where my UNI jz3077 is followed by this CSR laptop’s number.
the terminal when it first opens
3f. navigate to your class folder. This depends on where you have saved it. For me, I will change the directory in my terminal first to “Documents” by typing “cd” meaning change directory, followed by a space and then “Documents”. In line 2 in the image below, the text following % is the command I typed. In line 3 now is where I am in the file structure, inside Documents.
changing the directory to Documents
Then repeating this process to go to the class folder by using the command
cd 2021_fall_visualization_tutorials. Now I am inside the class folder and can start my local server.
changing the directory again, to the class folder called 2021_fall_visualization_tutorials
3g. Start the server. The command to start the server varies, you can find different versions in the book on page 65. For me, it is simplest to use the command:
python -m SimpleHTTPServer
I do not indicate a port number as instructed in the textbook. This is because we are not using multiple ports for more than one server at the same time, I am simply assigned the default port number which is 8000 in my case. You can see this in last line of the the terminal below.
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 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.
