D3 or Data-Driven Documents is one of the best known Open-source data visualization project in the world. In a nutshell, it is a JavaScript chart library for manipulating HTML elements based on data. The growth of visualization industry over the past 20 years has led to a main diffusion of fully-fledged visual analysis software such as Qlik, Tableau, SAS Visual Analytics, Power BI etc… which had rapidly taken over the market by offering extremely simple and fast way to build a chart. But the use of a pre-built tools comes with a set of disadvantages:
- Often have paid licenses
- Their free versions, when present, have limitations on the use of the charts produced
- Chart selection is limited to those selectable by the interface
- The same tool can come with an infinite number of different applications to learn (e.g. see Tableau with the Server / Public / Desktop / Reader / Mobile / PrepBuilder… versions )
- More emphasis on the business intelligence side and less on web standards
- Graphs hardly programmable and reproducible in series
- Inability to create very specific custom interactions with data
- General lack of customization on low-level elements
D3 on the other hand, overcomes all these limitations at the price of a greater complexity, related to the handling of the browser Document Object Model (DOM), SVG markup language and JavaScript, which is often verbose and difficult to learn, understand and debug.
Logical Structure
In this article we will focus on the main aspects to build a basic chart with this library, breaking down the whole process into 4 building blocks and making it simple to understand and quick to execute.
The 4 building blocks are:
- 💾 data
- 📏 scales
- 📊 axes
- ✍🏾 marks
We will use a modular approach to define an easy logical structure that will help us to start small and quickly learn the sequentiality of the steps necessary to provide the library with all the information required to render the chart as we wish.
Fundamental concepts of D3
- selection
We can select the DOM element in different ways. I normally use selection in three ways.
-
By element:
<body> <div>Showing effect of the style method</div> </body>htmlFor eg: If our DOM structure looks like this. We can select the div by simply calling our selection like this.
d3.select('div');jsIf we want to select all the divs that are present in the DOM. We can use the selectAll function of D3.
d3.selectAll('div');jsor we can also select by class or ID
d3.selectAll('.select-me'); d3.select('#select-me');js
- DOM manipulation:
We can manipulate the DOM element after they are selected. We can use the style() method to the selection to style the element like we intend to.
Similarly, we can use manipulating methods such as attr(), append() and many more to manipulate the selection.
- Method Chaining:
As the name suggests, it lets us chain multiple methods together. For eg:
d3.select('#select-me').style('color', 'red').style('width', '40px');
jsWhat does the above code suggest?
First, select a DOM element with ‘select-me’ id. Apply ‘red’ color to that selection and then apply ‘40px’ width to that selection. Pretty simple, right?
d3.select('#select-me')
.style('color', 'red')
.style('width', '40px')
.selectAll('div');
jsSimilarly, the above example does all the tasks explained earlier and then gives us the selection of all the div which are children of the earlier selection. From there, we can do more manipulation to the newly selected children.
- Data joins: Now this concept was a bit hard to understand at first for me.
Data joins allow us to bind selected elements to the data of an array. By using data joins, the visualization we create becomes more reactive to the data.
Three main methods for the data join process are
- data(): This is used to bind data. It’s much like looping through a set of data. The data() function joins the specified array of data to the selected DOM elements and returns the updated selection.
<script>
const myData = ['Hello World!'];
const p = d3
.select('body')
.selectAll('p')
.data(myData)
.text(function (d) {
return d;
});
</script>
htmlIn the above example, it will return “Hello world” once as myData only has one element in the array.
- enter(): This is used to execute certain manipulation when there is remaining data from the bind data but there is no selection left. The d3.selection.enter() function in D3.js is used to create the missing elements and return the enter selection. For eg:
<body>
// NO div are here
</body>
<script>
var myData = ['Hello', 'World', '!'];
var p = d3
.select('div')
.data(myData)
.enter()
.append('div')
.text(function (d) {
return d;
});
</script>
htmlIt will result in adding three new div with text contents of the array myData.
Hello
World
!
shell- merge(): This is used to merge the DOM manipulation before and after enter() together.
u.enter()
.append('circle')
.attr('r', 5)
.merge(u) //after this, any update applies to both u & enter()
.attr('cx', (d) => d.x)
.attr('cy', (d) => d.y);
js- exit(): D3 doesn’t naturally delete excess selections. Exit() comes in handy when you want to do some manipulation to the excess selections. Usually, I use it to remove the excess selections because that is the more expected output.
function print(data) {
const divs = d3.selectAll('div').data(data);
divs
.enter()
.append('div')
.merge(divs)
.text((d) => {
return d;
});
}
jsBy removing the divs.exit().remove(), we get a strange output that may look like this.
Remove
excess
selection
function
in
action
shellYes, we expected the ‘Remove’,’ excess’, and ‘selection’ div to be printed but we are getting ‘function’, ‘in’, and ‘action’ divs which were appended by the earlier function call. We can fix this by uncommenting the divs.exit().remove() line. After that, we execute remove() on the additional selection left.
Remove
excess
selection
shellI hope you got a basic overview of how things work in D3 with this article. Well, there are much more features provided by D3. Another interesting concept to grasp would be scales provided by D3. I will be writing about scales in my next article. Till then, I hope this article will help someone curious about D3. Happy Learning!
