Following my initial posts, several people expressed a desire to learn D3.js, but they seemed convinced the learning curve is too difficult. Sure, D3.js has challenging moments, but it hasn’t given me any reason to feel serious anxiety. If you are planning to learn D3.js, then you need to exercise patience and persistence to move past the initial difficulties.
From my limited experience, the biggest challenge was wrapping my mind around the key concepts. Until I could see the big picture, creating unique D3 work would always be just outside of my reach.
Early in your learning plan, I recommend dedicating significant amounts of time to immerse yourself in the topics mentioned in this blog post. You should clear your schedule and find ways to stay motivated and purposeful when reviewing the material.
To set expectations, please know this is only my 42nd day in learning D3, so I’m not in the best position to provide detailed tutorials to the larger dataviz community. However, my newbie perspective can be helpful in recommending where to focus your attention to better understand the big picture.
Outside of foundational learning, your main goal should be to create and share your first project. Having a greater understanding about the following six concepts allowed me to get my first few projects off the ground. (Note: I have published one D3.js project, and I’m currently in the middle of three others. You should expect that these projects will take longer to complete when compared to other approaches.)
Concept #1: Method Chaining
D3.js is one of the few libraries that promote method chaining for writing syntax. The main goal of D3.js code is to create, update, or delete scalable vector graphics (SVG) based on data values, data updates, or user interactivity. This type of functionality requires multiple methods on the same object, so chaining these methods helps reduce typing and making your code more organized and readable.
Concept #2: How Selections and Data Joins Work
When writing a block of code to create a new SVG object, it often starts with a “select” statement. Although not immediately recognized as odd, this sequence is a bit curious when you dig a little deeper.
This select statement is making a call to an object that doesn’t exist yet. To better understand difficult D3.js concepts like these, it’s often helpful to think about what’s happening in terms of SVG.
Although a SVG object may exist, it has no properties because it’s not joined to any data. Without attributes like height or width, nothing can be drawn.
Data, joined to corresponding scalable vector graphics, are needed to bring new data visualizations to life. The more you understand how data sources and SVG work together in D3.js, then the more likely you will be able to execute more complex and unique chart types.
- d3: Adding stuff. and, oh, understanding selections by Jerome Cukier
- Thinking with Joins by Mike Bostock
Concept #3: Scaling, Domain, and Range
Scaling is a foundational concept in D3. By creating and applying a scale, you are essentially translating a series of data values to fit on a computer screen.
For each scale, you must indicate the scale type, domain, and range. The domain is the minimum and maximum values expected from the dataset. These max and min numbers can either be dynamic or manually applied.
Range is where the data is projected on the computer screen (pixels are the most common, if not the only units used here). Typically, you want a responsive design, by capturing the screen height and screen width of the device being used to access the page.
Once the program understands the domain and range, it will know where to place graphics based on the data value inputs. Setting up a scale is relatively simple: you only need to identify the scale type, domain and range. D3.js does the heavy lifting by converting data values to the x and y values on a computer screen.
Concept #4: The Document Object Model (DOM)
D3.js stands for data-driven documents, and the documents (which are driven by data) are organized through the DOM. The DOM gives a standard way to access and manipulate webpage elements through different programming languages.
Properly structuring content with HTML allows D3.js, CSS, or other languages to easily access and change SVG attributes and styles. Potential problems may occur when competing style instructions are written, or the HTML markup is poorly structured.
Divisions (DIV) and groups (G) are frequently used together to organize content in D3.js projects. From my experience, DIV usually separates content to organize both text and SVG sections around different types of layouts. Groups are geared more toward graphics, which allows you to tag smaller items (e.g. circles) to a larger object (e.g. scatter plot).
Adding identification and class names allows you to reference back to the elements with D3.js and CSS. Once elements are selected selected, then attribute and style information can be updated in many different ways. For example, conditional formatting allows you to make style changes from data values or interactivity user actions.
- What is the DOM?
- How D3.JS Masters the DOM to Visualize Data for the Web
- SVG Group Element and D3.js by Dashing D3js
Concept #5: Responsive Design and UX Principles with CSS and D3.js
Admittedly, I’m still studying this myself. For every project I think in terms of managing different states for users, which may change based on device, user actions, or data updates. The goal is to identify each of these states and to optimize the user experience for each one.
Responsive design, conditional formatting, and user interactivity can be handled in many different ways. For example, a circle’s style can be changed in at least different two ways: indirectly with CSS properties or by directly adding style information in the method chain. (See concept #1)
One last complexity I feel I need to mention is that SVG and CSS sometimes behave differently when affecting content, because these standards attempt to solve different problems. SVG moves and sizes vector graphics with precision for complex drawings, like D3.js charts. In contrast, CSS is more flexible, because it supports diverse content for multiple devices and layouts, like text-heavy web pages.
Combining popular layouts in CSS, e.g. fixed, fluid, or grid, with interactive data visualizations allows for more immersive user experiences. By combining the latest trends from web design with innovative approaches to data visualization, audiences can be engaged in an endless number of ways.
- Using .attr and style by Jonathan Soma
- How to combine Flexbox and CSS grids for efficient layouts by Abbey Fitzgerald
- How to Efficiently Master the CSS Grid in a Jiffy by Ohans Emmanuel
Concept #6: SVG “Layers” and Order
In order to understand many concepts specifically relating to SVG, experience in Adobe Illustrator is extremely helpful because both are vector-based graphics. Although D3.js does not recognize layers like Adobe Illustrator or z-index properties from CSS, it does overlap graphical elements, which has a similar design impact.
So, the ability to think in layers and order helps break down and simplify complex D3.js designs. Unlike Tableau, where you are restricted to a dual-axis, D3.js allows you to add as many charts with different scales and supporting graphics as required by the design.
How elements are represented on your screen is determined by the order of instructions in the code. Basically, you are drawing new SVG objects over previously drawn SVG objects. For example, if I wanted to create reference bands in the background of a time-series chart, then I would make sure to draw these bands before creating the path object for the line.
If more sophisticated ordering is required, then you can either use D3.js to remove and redraw SVG elements or change the child node position.
So, is this everything one needs to know? Nope, this barely scratches the surface. Many D3 topics are still a distant reach for me, like mapping with GeoJSON and Mapbox, using the React.js library for single-page applications, or using more sophisticated SVG animation libraries like Greensock.
However, having a deeper understanding of these core concepts should help accelerate your learning when you move on to more advanced topics related to D3.js. Just be aware about how much material you are taking on at one time, because it can be overwhelming. For my personal projects, I choose to focus on two or three new techniques at a time, because I do not want to push myself too far too fast.
Feedback and Other Information
Feel free to ask me a question or leave a comment below or reply to me on Twitter.
I’m currently working on three different D3.js projects, and I have recently started sharing my dataviz ideas and design inspirations on Discord. More information on Discord here.
If you need motivation for starting a D3.js learning plan, then check out my New Year’s Day blog post: Is Learning D3.js a Good New Year’s Resolution for You?
Thanks for reading!