Data Formats and Data Binding

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

Continue reading

Interactions

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

Continue reading

Layouts

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:

  • Pie
  • Stack
  • Tree
  • Treemap
  • Pack
  • Force
  • Histogram
  • Cluster

In this post we are going to cover the stack and tree layout. I will create recipes for other layouts in the Recipes section.

Continue reading

Shapes

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:

“M0,-100A100,100,0,0,1,100,0L0,0Z”

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:

Continue reading

Transitions

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.

Continue reading

Axes

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.

Installing d3-axis

or

Continue reading

Scales

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.

Continue reading

The Enter-Update-Exit Pattern

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:

  1. 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.
  2. 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.
  3. 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.

Continue reading

Introduction to D3.js

What is D3.js

D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

– D3 Wiki

D3.js is a JavaScript library created by Mike Bostock to visualize data on the browser leveraging the full capabilities of web standards like HTML5, CSS3, SVG and Canvas. D3 enables us to present raw data in highly interactive and dynamic diagrams that are more intuitive for business analytics. With more and more organization moving towards Big Data, presenting analytical data through rich data dashboards is becoming more common.  D3 can not only be used to create charts like barchart, piechart etc but we can create any kind of visual diagram that we can imagine of. To get an inspiration have a look at the D3 gallery. Don’t forget to check out the examples at the bottom of the page 🙂

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.

Continue reading

D3 Selections

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.

Installing d3-selection

or

Continue reading