Getting Started

What is D3?

D3 is a JavaScript library and framework for creating visualizations. D3 creates visualizations by binding the data and graphical elements to the Document Object Model. D3 associates (binding) the data (stuff you want to visualize) with the DOM. This allows the user to manipulate, change or add to the DOM. Allowing direct changes to the DOM offers a lot of control on how a document (web page) will look. This level of control and how D3 manipulates the DOM makes it unique from other visualization toolkits.

D3 does NOT follow the template model some other visualization toolkits use. Toolkits that follow the template model, might have a functions for creating bar charts, line charts or scatter plots. With these type of toolkits, you can pass the data into the function, specify some chart attributes, and the library will generate your visualization.

While there are plenty of D3 examples available, D3 does not provide any templates. Instead, D3 provides helper functions that work at a more general level. These helper functions can handle the messy stuff of selecting graphical elements, calculating the spacing between hash marks on your axis, generating a scale for your data, or animating graphical elements.

Why use D3?

If you’re needing:

Animation
Interactivity with mouse events
Displaying dynamic data
Or have something in mind, that can’t be done in other toolkits

Why not use D3?

D3 isn’t going to be for everyone.

D3 isn’t the best toolkit for building cookie cutter visualizations. If you’re only needing to create a bar graph or something simple and don’t need much in as far as customization goes, other toolkits would probably serve you better. This is especially true if you’re new to web programming. Learning to D3 is process that requires a lot of time initially when you’re unfamiliar with all the web techonologies D3 uses.

JavaScript and SVG requirements can also be a disadvantage and exclude a portion of the internet population.

D3 requires users have JavaScript enabled.
D3 requires a browser that supports SVG. Modern browsers provide SVG support, but there is a significant internet population that still uses olders versions of IE (<9.0 ).

High-level overview of how D3 works

D3 was created using JavaScript.
D3 (in general) uses SVG to create the graphical elements.
D3 uses CSS to style (customize) how SVG elements are displayed.
D3 uses the Document Object Model (DOM) to place elements in the document.
D3 uses a method chaining syntax. If you’re familiar with JQuery, it’s similar. Otherwise, it can be a little strange at first.
D3 has a lot of helper functions that handle the complicated math for creating scales and marks.
D3 DOES NOT do statistical analysis.

What do I need to know to start using D3?

There are several related web technologies involved in using D3. To begin using D3 you’ll need to be familiar with JavaScript, CSS, method chaining, SVG. Plus you’ll need a basic understanding of the DOM.

HTML: A basic understanding of HTML structure is necessary. While we won’t be using many HTML elements in these tutorials, being proficient in HTML will be needed when you layout the visualization next to text or some other supplementary material. html tutorial

JavaScript or Block Programming: While it’s not necessary to know JavaScript, being familiar with a block style programming language is necessary. If you have programming experience in a different language, you shouldn’t have a problem picking up the basics of JavaScript.

DOM: An basic understanding of the document object model hierarchy and how it works. We will be covering how DOM works in the context of D3.

CSS Selectors and Styling: An understanding of selectors and how it’s related to the DOM, styles, and attributes

Visualization / Design: Because D3 doesn’t provide any templates the design is left entirely to the user. The downside of this control is the user needs to have an understanding of how to create good designs. Otherwise you could be stuck with visualizations like this.

All of this makes for a steep learning curve, especially if you have never done any web programming.

Goal of this website

For novice web programmers, learning D3 can be daunting. Our goal is provide the novice web programmer, with enough starting knowledge so that you can start to understand how the more complicated D3 visualizations work. We’ll cover the basics of SVG, DOM, JavaScript, Method Chaining, and CSS styling. For more in depth discussions, we’ll provide resources where you can learn more.

At the end of these tutorials, you’ll have built a line graph, a bar graph, and a scatter plot.