Why should I learn D3?
By: Anish Antony
Tags: Programming, JavaScript, Coding, Web Development, D3js

Explore D3 Part: 1

If you are work with SVG or graph frameworks, I am very sure you already heard about D3. In this article, we will discuss what is D3? What are the different components of it? and How D3 makes your life easier. Once you finish this article, you will get a very clear idea about the scope of D3.

Photo by Isaac Smith on Unsplash

You know d3 is mainly used for data representation in the form of graphs. Mostly the data is represented on top of SVG. So you should require minimal knowledge about SVG before get into d3. I already published some article about SVG from there you will get a good understanding about SVG.

Here follows the list of my article related to SVG.

Who uses D3?

If you directly go to d3 website home page, then you can see it contains a lot of verity charts there. So you may misunderstand that D3 is a library which contains those charts or D3 is a library which includes some readymade charts. This is almost wrong. D3 is not a charting library like a fusion chart or highchairs. D3 doesn’t contain any readymade charts. But you can able to create any kind charts by using D3 from scratch very quickly and easily. D3 provides excellent support for dom manipulation.

D3 and Fusion Chart

How d3 varies from the charting libraries such as highcharts or fusion chart or google chart is, in those kinds of libraries contains some readymade charts such as line chart, pie chart, bar chart ..etc. So from a developer point of view, he just wanted to input the values required for the chart and conditions in the form of JSON or javascript object and it will make the chart based on the input details. From the developer side, he needs a very minimal technical knowledge for implementing a chart using those charting libraries such as highcharts or fusion chart. But one problem is if you want to include a new additional feature on these charts which was not available, then it is a difficult task. Comes to D3 for making a chart then the developer needs to code all the required things for the chart. For example, if the developer wants to make a line chart, then he should need to do the code for axes, grids, scale, charting line…etc. So the developer requires good technical knowledge for making that. But he can do n number of customization on that very easily. But d3 had a large set of functions to make the development easier. With the help of those utility function, it is able to make the development easier than the normal javascript.

If you to do unique, complicated kind of DOM manipulation as part of your implementation, then D3 is a perfect option for that. D3 contains a broad set of modules for making different kinds of dom manipulation even though D3 is a lightweight library.

D3 Modules

Let’s move onto discuss some important modules of d3 and see how that module makes the development easier.

d3-select

This module is used to selecting a DOM element. Selection return either the current selection or new element. It is able to play the dom-manipulation on the selected element. Most of the d3 operations are starting with this module.

d3-scale

Is used for scaling the abstract set of input values to representational value. In the actual world. The input values range may become larger which can’t able to plot in the graph, So for those scenarios, it is required to scale it to a small representational value corresponding to the input set. this can be done with the help of d3-scale.

d3-arrays

This module contains so much of utility functions for manipulating arrays such as min, max, search, merge, grouping, ordering, shuffling …etc. Also using d3-arrays it is able to generate and scale the array. This is very helpful for plotting values for the graphs.

d3-format

This is used for different types of number formating.

d3-random

It is for generating random numbers from various distributions. This module supports a large set of functions for making random numbers in different ways.

d3-interpolate

The interpolate module make a way of computing intermediate values between two given values. The value can be a colour, Number, Date, Angle of rotation, zoom level…etc.

The idea behind interpolate is it will take the two values then depending on the interpolar type its route to the specific functions which will create a specific interpolar.

d3-axis

This is used for making graph axes and ticks on the axes. The module has a great number of functions for customizing the axis and ticks in any way.

d3-color

It is used for making different colour, formating the colour on different formats such as RGB, HSL and Hex, making a darker and brighter copy of the colour…etc.

d3-brush

This is used for making a one or two-dimensional brush area. In this area, the mouse pointer becomes changes to a crosshair. In this area, user can drag an select a particular area. Generally, this is normally used for zooming a particular area of the chart.

d3-drag

The module is mainly for drag and drops functionality

d3-zoom

This is for zooming an HTML, canvas or SVG element.

d3-fetch

This is used for getting data from different file types. It support file types such as CSV, CSV, HTML, TXT, image…etc all are supported by this module.

d3-dsv

The module is mainly used for creating and parsing of TSV(Tab Separated Value) as well as CSV(Comma Separated Value) files.

d3-timer

This is efficient for queue managing over different animation.

d3-path

Is used for making an SVG Path

d3-polygon

This module is used for making a two-dimensional polygon

d3-shape

using this module it is able to define different SVG shapes such as arc, line, area, links, symbol and stacks.

d3-time-format

This module is for formatting and parsing a date-time. Using this module it is able to define a format and also it is possible to parse and format based on that.

d3-time

For playing the calculations using different time fragments this module is used.

For eg: the difference between two dates, converting time into another scale format, finding coming Monday, Tuesday, Wednesday in date…etc

d3-dispatch

This module is used for event dispatching. Custom event registration, un registration, event handlers all are done with the help of this module. This module helps to separate the event handling with the core modules.

d3-transition

This is for making different animation transition management.

d3-ease

It is mainly used for creating smooth animations. It doesn’t mean you can make different transitions using d3 ease. But you can make the animation so smooth by controlling the speed of the animation.

d3-chord

This is used for making a chord diagram. The ultimate use of the chord diagram is making interrelationship between matrix items.

d3-contour

This module consists of several utility functions for making contours graph. Contours graphs are the way to plot three-dimensional space on two-dimension.

d3-delaunay

This is a module for making vernoli diagrams. It is constructing based on the project delountor.

d3-force

This is used for making a force-directed graph using velocity verlet integration. These kinds of graphs mainly used for making networks and hierarchies.

d3-geo

The module used for making geographic path and projections.

d3-quadtree

is a recursive pattern to make a two-dimensional space into squires.

So this is all about different modules in d3. I hope you got a brief idea about what is d3, different modules on it and how d3 makes your life easier. On my next article, I will explain how to make different charts by using D3.