D3.js is the library behind many of the dynamic data visualizations on the web today. The highly customizable set of modules allows programmers to draw their data as they see fit, and then equip it with colors, animations and interactive elements.
With such a robust library and a steep learning curve, figuring out where to start with D3 can seem more complicated than the coding itself. The resources below will help you learn what D3 is, what you need to get started and what kind of tools are available.
The potential is immense. The official D3 example gallery contains almost 200 chart types and just scratches the surface of what people are building. The data exploration and manipulation options are robust, too. Modules such as d3-array and d3-dsv allow for iterative manipulation and built-in parsing, respectively.
Accessing D3 is simple. Users can load the library with a single line of HTML code:
From there, applying D3’s built-in transformations and building a customized chart becomes more complicated. For example, a basic scatterplot requires users to grab and manipulate the data, build the appropriate axes and chart space and then draw and place the SVG elements onto the DOM.
D3 Chart and Code Snippet Example:
However, the intricacies are what help make D3 such a powerful tool. D3 creator Mike Bostock, cofounder of Observable and former New York Times graphic editor, describes the library as “unbounded.”
Where other abstraction methods hit their limit, D3’s primary limit is each user’s knowledge. “It just gets kind of progressively harder, the more and more that you want to do with it.”
D3’s primary limit is each user’s knowledge.
Where Is D3 Used?
D3’s specificity and extensive library make it the tool of choice for many businesses, visualization practitioners and outlets. For example, “The Upshot,” the data visualization segment of The New York Times, relies on D3 to create interactive pages and charts.
Before starting with D3, it may be helpful to have some experience with programming and design.
Foundations of programming:
SVG (scalable vector graphics) provides the option to draw graphical elements. D3 allows you to select an SVG container and add attributes, styles and data marks. Then, HTML and CSS are used as placement and styling tools, respectively.
Web resources, tutorials and online coding bootcamps are available for those interested in gaining foundational programming knowledge. It is not necessary to be an expert in all of these areas, but a general familiarity with the purposes and syntaxes will make learning D3 easier.
Information design fundamentals:
Effective D3 visualizations must first be effective data visualizations. Individuals should have a grasp of the basic principles of information design, from defining the problem to understanding your audience and choosing marks and channels.
Some introductory books on information design and data visualization include:
Start with D3 basics
The interactive possibilities, such as hover states and animations, are a large part of what makes D3 a desirable skill. However, beginners may have a difficult time with more complex functionalities without a strong understanding of the fundamentals such as axes, scales, binding data and manipulating SVGs and wrappers.
Avoid designing in code
Even though you will be building a visualization in D3, designing as you code will likely result in getting overwhelmed with the technicalities at the expense of your goal. The Pudding’s Ilia Blinderman recommends using simpler tools such as Keynote or Figma. Choose what you are most comfortable with, whether that is Adobe Illustrator, pen and paper or something in between.
Use existing code examples
D3 is open-source and prolific — there are hundreds of examples representing nearly every chart type or animation. Try experiments on existing notebooks, or try to replicate a D3 example from scratch to test your own skills. When building particularly complex charts, expert Nadieh Bremer recommends finding some code that lies close to your sketch and building on it from there.
Utilize accessor functions
Amelia Wattenberger, author of Fullstack D3 and Data Visualization, proposes “accessor functions” as a way to understand the data, access it later and save time. Save your metric to a variable (named something like xAccessor) that you can call back later in your code every time you need to access “x.” If the data structure changes, you only need to change xAccessor, instead of updating every single reference to “x” in your code.
The key to mastering any new skill is repetition. With so many different chart types and modifications, plus an endless amount of data to visualize, there is no shortage of opportunities to practice D3. Weekly challenges such as “Workout Wednesday” and “Makeover Monday” offer visualization problems and a community to gain feedback from.
Some aspects of D3, such as its difficulty and whether it is worthwhile, are hard to gauge from the start. Consult the frequently asked questions below to learn more.
Is D3 difficult to learn?
How long does it take to learn D3?
If you understand the basic coding foundation, you can potentially build your first chart within a few hours. However, gaining a deep understanding of what each element is doing and how the manipulations work will take time. The amount of time you spend furthering your knowledge of D3 depends on how much you want to learn. How advanced do you want your visualizations to be? Do you want to experiment? What kind of interactions and animations will you try?
Is it worth it to learn D3?
Figuring out the best programming language to learn depends on your goals, experience and time. D3 is the library of choice for those who want to create highly customizable, interactive and dynamic visualizations for the web. For that reason, it can be a great tool to learn. However, it may not be ideal for simple, highly structured charts that can remain static. Other visualization libraries that could be helpful for higher level abstraction include ggplot, VegaLite or software such as Tableau.
Mike Bostock’s introduction to D3 is hosted in Observable, an online, interactive coding environment built for visualizations. This series of notebooks covers the basics of D3, from loading data and making scales, to animation and interactions.
Murray’s book and the accompanying tutorials include downloadable D3 code and thorough instructions for building charts and adding interactivity. O’Reilly books are free for subscribers and may be available to students through their school library.
Wattenberger’s book and master class include downloadable code and will have readers building a D3 line graph by the end of the first chapter. Fullstack D3 is available for purchase through Newline. Wattenberger’s blog also includes a library of D3 explainers and is free.
Bremer and Wu’s yearlong data visualization project is available as a book, and details a monthly project from each of them, complete with code snippets, original sketches and their thought process. Their initial blog for the project is free online.