Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Learning Data Visualization with D3.js.
- [Instructor] The code for this course is freely available in GitHub for all users at this URL. In GitHub, you'll see that the project is organized into branches. Each branch corresponds to a video in the course. They are named according to the video that they correspond to. If you see a branch that starts with a name like 01_05b, that means that that branch corresponds to the first chapter and the fifth movie. Also, if you see a B at the end of the name, those are how the files look at the beginning of the video.
And if you see an E at the end of the name, that's how the files look at the end of the video. The best way to work with a project is to clone all these branches at once. In order to do that, you'll need Node.js as well as Git installed. And you can find Git and download the installer for your platform at this URL. When you install Git, make sure that you add the Git BASH Terminal option in Windows. It makes running the commands more consistent. So let me show you how to clone all the branches for this project. First, I'm going to go to the GitHub Repo, and then click on this button and click on this icon right here to copy the Git link to the clipboard.
I'm going to switch over to a terminal, and I'm using in a Mac, so I'm going to use the terminal application. On a PC, you can run Git BASH. And so I'm going to type CD and then tilde slash desktop. So switch over to the desktop. Then I'll create a directory with the MKDIR command and give it a name. I'll call mine D3. And then I'll do a CD D3 command to switch into that directory. You can see that the folder appears right here on the desktop.
And once I do that, I can issue a Git Clone command with the minus minus bare option. And then, I'm going to paste the URL from Git and add an extra .git at the end. This is going to download just the contents of the Git folder. Now we need to convert this to a regular repository. So I'm going to use the Git Config command and change a variable called core.bare to false. Once I do this, our folder will no longer be a bare repository.
Now, if I issue a Git reset command with the minus minus hard option, everything will be converted to a regular repository. Let's go ahead and clear this out. And if we do a Git Branch command, we should be able to see all of the branches for the project. The next thing we need to do is install the project dependencies. In order to do that, I need to use an NPM install command. Depending on your permissions on a Mac, you may need to type in S-U-D-O at the beginning of this command.
All right, this is done installing dependencies. Let's go ahead and clear the screen. So once the installation is done, I can switch to any of the branches I want to, using the Checkout command. The default branch is the master branch. We're already on that. But you can type in any other branch you want to, if you want to check that out. This project uses Gulp JS to create and run a server, which is required for these type of projects that use AJAX. In order to get it going, just run the Gulp command and this will open up the project in your default browser.
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data