Technical Hints

Git

You can clone the assignment repositories using either HTTPS and SSH, but we recommend using SSH because you do not need to enter your credentials everytime you pull and push once you set it up for the first time.

There seems to be an access issue (code: 403) with HTTPS cloning. In that case, please try the SSH way.

How to set up Git SSH authentication

Please check whether you have a SSH key generated already: there should be id_rsa and id_rsa.pub in ~/.ssh. If yes, please go to step 3.

Generate a SSH key on your local machine. Run the following command in a terminal. Follow the prompts to store the key in ~/.ssh and enter a passphrase (it can be empty, or a phrase you like).
```
ssh-keygen -t rsa -C "your_email@example.com"
```
Navigate to ~/.ssh. Note that this is a hidden folder by default. You should see id_rsa (private key) and id_rsa.pub (public key).
Open the id_rsa.pub with a text editor or using the command cat id_rsa.pub (on *nix OS), and copy the entire content, which should be a long string.
Open the settings in your students github account, navigate to the SSH and GPG key tab (on the left sidebar), and then upload your public key.
You should be able to use the SSH link to clone repositories.

Note: do not upload or send out your private key. It is supposed to be on your own machine.

Static server

When developing a visualization, the data files are usually loaded dynamically using Javascript, such as d3.csv(). In this case, you will need to start a static file server to serve all your HTML/CS/JS and data files. We recommend two simple options to start a server, then you can view the results on a browser using http://localhost:[PORT-NUMBER].

Simple HTTP server provided by Python. For Python 2, use python -m SimpleHTTPServer [PORT-NUMBER]. For Python 3, use python -m http.server [PORT-NUMBER]
HTTP server provided by NodeJS. First install through npm: npm install http-server -g. Then start the server: http-server [PATH] -p [PORT-NUMBER]. When specifying the path, please avoid spaces in the path name or use double quatations.

Note that you should start the server in the project directory.

Debugging JavaScript & D3

The developer tools in Chrome, Firefox, and Microsoft Edge (Chromium) have very similar capabilities:

Try using the debugger built into your browser to do each of these operations:

Setting breakpoints
Stepping in and over
Printing/showing values
Changing variables
Verifying that static files are loaded correctly
Inspecting the results of API calls

Or you can use, for example, Jetbrains WebStorm for programming and debugging JavaScript if you prefer an IDE. It's free for students.

Common D3 Debugging Steps

Close all functions properly!
Make sure that your selectors match valid html elements. When elements are not created with D3, it is because their selector d3.select('#svg-container') does not match the element they are trying to select <div class="container"></div>. Sometimes these things not matching can look like it works (when it doesn't)
If you don't see elements that you expect, check in the Chrome console first. If they appear there, then check their coordinates to make sure they are in the view window.
D3 accepts arrays as parameters to its select.data() function. Make sure that you are passing an array as a parameter. For complex data, consider using Object.map(), d3.rollup(), or d3.group.
When debugging data, it's helpful to print out individual attributes to see what the data is. selection.attr('y', d => {console.log(d); return d}) helps a lot to just see what data is getting passed to a selection.

If you're still stuck, check Piazza if there are similar questions or reference our copious d3-examples and case-studies to see if those tackle similar problems to what you are facing first.