Raw data can come in different formats. We need to process or transform it into a form that is consumable by D3 and thus producing meaningful visual elements. In this post we will cover the following topics related to data in D3:
- Data array and array manipulation (d3-array)
- Collection (e.g Object, Map, Set) (d3-collection)
- Creating nested data (d3-collection)
- Loading data from external files (d3-dsv)
- Data binding
It is often required to interact with our visualizations e.g hovering, zooming, clicking etc. to change the appearance of the visual elements or drill drown information. These kind of interaction has first class support in D3. In this post we will look at the following topis:
- Interacting with mouse events
- Implementing zoom and pan behavior
- Implementing drag behavior
D3 layouts do not generate any visual output rather they take data as input and produces data that is more convenient to use either in generators or manually drawing in SVG or canvas. We have already seen one such layout called pie in the previous post where we created a pie chart using the pie layout present in d3-shape module. In pie layout we show how d3.pie() generates the startAngle and endAngle for us which can become very cumbersome if we create them manually. This data is then fed to the arc generator to create the pie slices.
D3 has a rich set of different kinds of layouts viz:
In this post we are going to cover the stack and tree layout. I will create recipes for other layouts in the Recipes section.
Visualizations consist of discrete graphical elements like lines, area, arc, symbols etc. We can create all these elements (called Shapes in D3 terminology) using svg:path element. But if you are familiar with the svg:path then you know the pain involved in writing the ‘d’ attribute of the element. A typical example of create an arc may look like this:
That’s cryptic right? So instead of writing the d attribute manually, D3 provides shape generators which when used generate the d attributes value and then we can simply assign the value to the d attribute and get our desired shape. But to use the shape generators we need to install the d3-shape module first:
What is transition ?
When the state of an element changes from current state to desired state, transition helps to apply the change smoothly by interpolating the states between the two end states. D3 transitions are interpolation-based animation. D3 uses various built-in interpolators to calculate the intermediary state and applying the states smoothly to the DOM element giving a feel of animation.
D3 transitions are provided by d3-transition module. So lets install it.
Now that we learned the essentials of scale in our previous section, we are all set up to draw axes in our SVG container. So lets see how to create an axis in D3. But before that we need to install the d3-axis module.
What are Scales ?
Lets answer this question by a simple scenario – Lets say we have an array of data and we want to represent that data in a barchart such that the height of the rectangles correspond to the data values in the array. The array is:
We want to draw our barchart in a svg container of dimension 500px X 500px (i.e. width=500px, height=500px). If we simply start drawing the rectangles by setting the height of rectangles to the data value then you can see rectangle 6 and 7 whose height will be 980px and 1200 px will overshoot the svg container and we will not get meaningful visualization in that range.
In our previous section on data binding we saw how we can attach data to DOM elements. This provides us with two sets – DOM elements set and the data set. While binding data it may happen that there are surplus/less number of entries on either set. This leaves us with three scenarios:
- The number of DOM elements are less than the number of data points in the data set. This means that we need to add the missing elements to the DOM. These data points which don’t have a corresponding DOM element yet and are ready to enter the DOM in the form of DOM visual elements form the Enter set.
- The number of DOM elements are more than the number of data points in the data set. This means we have to remove the surplus DOM elements for which there is no corresponding data point as a DOM element without a data point attached to it is useless. These surplus DOM elements form the Exit set.
- The number of DOM elements are same as the number of data points in the data set. These DOM elements have proper data binding and may need update if the corresponding data value changes. Hence these DOM elements form the Update set.
What is D3.js
– D3 Wiki
After seeing all the demos in the gallery, I bet you will be itching to get your hands dirty with this wonderful library. So lets get started and setup the environment for D3.
In D3, we need to select a visual element in the DOM before we can do any modification or any sort of operation on it. D3 selection APIs are provided by the module named d3-selection.