net

FEATURES
25 JavaScript tools

D3

d3js.org

Data visualisations are a

great way to make large

datasets more interesting.

By approaching the

information from a new angle, the data is

easier to understand and new insights

can be made. Making them can be easier

said than done, though, and working with

SVG directly comes with its own quirks,

while trying to output to a <canvas>

element can be slow and inaccessible.

D3 stands for ‘Data Driven Documents’

and is designed to create data

visualisations with JavaScript using SVG,

HTML and CSS. These documents are

designed to be easily updated as the user

interacts with them or new data arrives.

At its core, D3 binds data to DOM

elements, which can be interpreted in

different ways depending on the project.

For example, a bar chart could be created

with a few <div> elements that are styled

to look like bars. Each data value would

be bound to a bar, which in this case

would be widened based on its value.

By keeping a reference to the selected

element, the charts can be updated

as necessary. The “enter” and “exit”

methods define what should happen

when an element is to be added or

removed from a chart based on the data.

With that in place, charts can be reparsed

and updated automatically.

Where D3 really shines is through

complex visualisations, such as maps.

This is achieved through manipulation

of SVGs. While there is no built-in

functionality for creating a map, it is

possible for D3 to plot GeoJSON data using

d3.geo.path.

There are plenty of other tools and

libraries built using D3 that are designed

to make the process easier. DataMaps

provides ready-made map data on set

projections that can be dropped in and

customised as needed.

As D3 will be in charge of the DOM, it

can be difficult to integrate with modern

web frameworks that update based on

state. Libraries such as React-D3 are

made to work with updating props and

can take the hassle out of integration.

Above Taucharts uses D3 to generate charts that are simple to create and easy to understand

INTERFACES

Above The Gallery shows the diverse range of graphics

that can be made with D3 (github.com/d3/d3/wiki/Gallery)