in Data Visualization, JavaScript

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.

Installing D3

If you use npm, install the d3 npm module:

This install the complete D3 library.

Note: D3 v4 is written using ES6 modules. It is composed of a number of microlibraries such as d3-selection, d3-scale, d3-color etc. This modular organization allows us to install and load the modules which are required in our project. On the contrary its predecessor D3 v3 was one big library that we were bound to load in its entirety even if we use only some of the functionalities.

To install a standalone D3 microlibrary:

e.g

Ok we have installed our required module successfully. But how do we use it inside our code. If you are familiar with ES6 then you know how to import the module:

If you have installed the complete library:

If you don’t use npm or if you want to directly include the library in your HTML page, then load d3 from  d3js.org, CDNJS, or unpkg. E.g

To load a microlibrary:

In this series we will use the following base template to write all our D3 code:

 

Throughout this series we will be mostly drawing SVG elements onto our browser. So lets cover some basics on SVG before proceeding to the next section.

SVG Refresher

  • SVG (Scalable Vector Graphics) is an XML-based image format.
  • It can be resized and scaled repeatedly and limitlessly without losing any resolution or quality.
  • Almost all modern browsers support SVG except IE8 and earlier.
  • To draw various shapes in SVG we first need to have a SVG container element. It acts like a canvas where we can draw other geometrical shapes like rectangle, circle, line etc.

Lets look at an example how we can draw the SVG elements in our HTML page:

In this demo you can see the SVG node acting as a container for other SVG shapes like rectangle, circle, line, text etc.

NOTE: In the SVG container the top-left corner is (0,0) . It is the origin and the x axis runs from left to right and y axis runs from top to bottom.

In our next section we will see how to draw these shapes using D3.

<< D3.js (v4) Essentials           D3 Selections >>

Write a Comment

Comment

  1. Aren’t scale and selection micro libraries already included in the file we can link directly in the html file?
    “https://d3js.org/d3.v4.js”
    I included this file, wrote “d3” in the console and it showed me scale, select and selectAll.. etc