What is D3?
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:
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.
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 (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?
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
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
At the end of these tutorials, you’ll have built a line graph, a bar graph, and a scatter plot.