Setting up D3
To set up D3:
- Go to the D3 page, and download the current zip file. This is version 4.7.4.
- Make a folder for your projects, called D3InfoVisProjects and save the unzipped folder there. Unzip it, copy the files d3.js and d3.min.js back into your main project folder, D3InfoVisProjects.
- You can also embed the link to D3 directly into your html page instead of downloading the D3 zip file as the photo above shows. Both ways are equivalent.
- Use Sublime Text to create a new index.html file with the following structure:
- The link tag on line 7 above shows you a linked style file. Create a file called main.css with the following structure as shown below. It is an extrnal CSS file that we use to style our HTML pages. Save this file too inside your D3InfoVisProjects folder.
- Now we are ready to set up our first wonderfully empty page. Its wonderful because each time we want to build a project, we simply come back to this template and use it. In fact, we follow this idea throughout for creating reusable and recyclable code in D3: each time we develop something we keep a copy of it, so we can change it and reuse it again with another dataset or with different parameters.
- Finally, we need to "serve" this webpage. Usually, in the client-server model and web parlance, a website is "served" by a machine, and the "client" making this request is a different device or machine. In this case, we will use our own machine to act as the server (or the "localhost") as well as the client. Kind of self-circular? Yeah! But this is also how you will do your Assessment 3, when you develop the webpage for your story (and how we will run your website when we assess): Simply submit the index.html with the images, other resources etc. in a single folder.
- Open up a Terminal window on Mac by searching for it with Spotlight (cmd in Windows). If you have never worked on the command line before, don't worry. It is how all computing was done before GUIs were invented, and it is still quite a cool thing. Once you get the hang of it, it is very addictive. But for now, we will only need to know a couple of commands. Navigate to your folder, where the index.html and other files are. You navigate on the Terminal command line using the command cd. When the Terminal window is opened, it is on the root or home directory. If you are anywhere else, type cd ~/ to get to the home directory. Now, suppose your folder is on the Desktop. Type cd Desktop. This will take you to the Desktop. Then type cd D3InfoVisProjects. Now you should be in your project folder. You can use ls command on Mac or dir on Windows to view the contents of the folder you are currently in.
- Finally, type python -m http.server 8888 and it will show you that it is now serving the page. (Note: Our lab machines have Python version 3.x etc., for Python version 2.x etc. the command is python -m SimpleHTTPServer 8888 & ). The image shows my folder structure, yours will be different. But the GET / HTTP ...200 messages show that everything is working now.
- Open up a Chrome browser and type in http://localhost:8888 in the url and hit return, you should see your webpage, and the first empty D3 page link! Each time we change our HTML file, we simply hit a refresh on the localhost url and the page updates.
- One last handy tip: Sometimes just refreshing the page does not refresh everything. For example, the CSS may not update. In such a case, a shift-cmd-r forces everything to update.
- To stop the localhost, press Control-c inside the terminal.
Congratulations, we have now set up everything we need to get cracking!
Sarkar, S. and Hussein, D.A., 2017, D3 Tutorials for Information Visualisation Design Studio, University of Sydney.
Email: firstname.lastname@example.org, email@example.com