From the course: D3.js Essential Training for Data Scientists

What you need to know - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

What you need to know

“

- [Instructor] You will find this course easier if you already know a bit of HTML, CSS, and JavaScript. D3 isn't a software, like Tableau or ClickView. There's no interface or drag-and-drop. There aren't any pre-defined charts, either. There are just shapes, lines, and text. To make a histogram in some languages, you'd call a histogram function. To make a histogram in D3, you create rectangles and axes yourself. This makes D3 really powerful, because you can combine rectangles, lines, and circles, to create completely new kinds of charts. You're not limited to a pre-defined set. If you can conceive of a graphic, you can create it in D3. To make a visualization in D3, you have to code it, format it, and publish it within a webpage. So you need to know the basics of creating and publishing a webpage, in order to use D3. We're going to go over the very basics of HTML and CSS as a refresher, but we do not teach these languages in this course. You will learn D3 quicker if you work alongside me, pausing and testing each step as we go. For this, you're going to need a piece of software called a text editor or code editor. I'll be using an editor called Atom. Atom is free, and it's available for Macs, Windows, and Linux. I recommend that you download this now. In order to preview our work, I'm going to be using Firefox, with an add-on called FireBug. This is FireBug at the bottom here. FireBug allows developers access to two crucial things: the JavaScript console, and a way to see the DOM tree. The console reports errors to you, and allows you to see inside the code as it's working. DOM is short for Document Object Model, and allows you to see all the elements of your webpage nested within each other. Sometimes you add 47 circles to the webpage, but you can't see them. In these cases, the DOM tree is usually the way to solve the mystery. If you choose to use a different text editor or browser, please ensure you can do these two things. They're crucial to developing in D3.

Contents