20.06.2016 | Nils Nowak | comment icon 1 Comment

Getting started with D3.js

What is D3.js?

The name D3 comes from “Data Driven Documents”. So the core functionality is reflected in the name of the library. D3.js was released in 2011 by Mike Bostock to manipulate documents on base of data. Therefore, in opposite to other libraries of visualization, D3.js doesn’t provide any pre-built selection of charts and graphs. Instead the library’s focus lies on provisioning methods and tools to use current web technology as CSS or SVG efficiently. Although it’s possible to create normal charts with D3.js, which are provided with other libraries out of the box, the main advantage is the high flexibility of D3 in dealing with elements like SVG. With D3 every visualization is possible. The only prerequisite is the appropriate data.

SVG as core element

The charts developed with D3 are essentially based on SVG (Scalable Vector Graphics). In the meantime SVG is part of the web standard and can be displayed by every browser without problems. Below, the SVG elements and their properties are described in detail.

The notation of the SVG element is written in XML. The specification of the DOM allows the integration of XML elements in HTML. Therefore the integration of vector based graphics into HTML documents is no problem anymore. The advantage of SVG graphics compared to normal graphics is the declaration of vectors instead of pixels. By doing this the graphics are scalable in size without losing quality.

SVG elements

Within a SVG element there are several elements to create a special kind of form.

In the code example shown above, a rectangle has been created. The properties assigned to the element define the size and the position of the element. The positioning within SVG elements follows the rules in the example below.

svgCoordinates

The point 0,0 is in the left top corner of the element. When you define the X and Y value of an element, you go to the right on the X-axis and then to the bottom. From this perspective the positioning of the Y-axis inside SVG elements is reversed to conventional Cartesian coordinate systems.

D3 Functionality

D3 provides easy possibilities to create SVG elements and manipulate them by using styles and attributes. Similar to jQuery the elements are chosen by selectors. An easy example shows the basic principle of D3.

The example shows the selection of the body element through the D3 method select. With the following selectAll() method you can use a special feature of D3. The method offers the opportunity to create a DOM element for every available dataset. Actually there are no elements with the class .bar in the DOM. With the data() method it’s possible to bind data to DOM elements. In this case we are binding an array of four numbers. Through the method enter(), D3 creates selection pairs of value and DOM element for every value of the data array. After execution of the enter() method the pair consists of a value and an empty DOM element.

image1

Through append() the considering DOM element can be appended. In this case we pass a div element to the append function. With the methods attr() and style() you can set concurrent properties to the DOM elements.

image2

The created selectors now contain the value of the data variable and a considering DOM element. So it is possible to adjust the DOM elements to the number of datasets. The databinding through D3 is complete.

Generators in D3

Generators give the possibility to fulfill several specific tasks. A simple generator is the line generator. With this generator it is easy to draw lines. It only needs the coordinates of the points, between which the lines should be drawn. The following example clarifies the use of the line() generator.

The example shows that the generator only needs the points in form of an array, to connect the points and draw a graphical figure. The figure is filled automatically. If you want to avoid that you can disable fill in CSS.  One of the most important and most used generators in D3 is the axis() generator. With it the x and y axis of charts can be drawn. The scale of the axis also depends on the available data. D3 provides methods to detect the maximum of the dataset. Also the range of the current axis is detected.

The following example shows the easy implementation of the x axis. The scale is defined by the dataset.

D3 example chart

The chart shows the distribution of the German population to the federal states. At the same time the pie chart shows the distribution of the population of different ages.

D3 and Model View Controller

D3.js is no Model View Controller Framework. To use D3 in more complex applications you have to develop a workaround to apply D3 with frameworks like AngularJS. In combination with angular the solution to develop directives is obvious. In this case charts can be implemented as HTML element. The integration of D3 can be solved through an angular factory service. How an integration of D3.js and angular can look like I will show in another blog post.

Summary

D3 is a mighty tool to visualize data and is almost unlimited in its possibilities. The use of D3 is advisable if a chart with special requirements is needed. If only a standard component is needed, other libraries like Chart.js can provide easier solutions. Whereas D3 supports everything that can be visualized in the browser, even sophisticated animations and transitions are no problem.

AngularJS d3.js JavaScript svg
  1. Integration of D3 in AngularJS Applications - Exxeta Blog
    Posted on
    […] focus of the D3.js library I introduced in may last blog post, is the visualization of data. With D3 you could develop less whole applications, but custom charts […]

Leave a Comment