A few months ago I started a project that required data visualisation and I needed to work out which library to use. There are tens and tens of JS libraries that are available. I finally came to the conclusion of using D3.JS but not after a lot of investigation.

Here is what I’ve learnt.

Image for post

What is D3.JS?

D3.js is known as a data visualization library, these kinds of libraries are tools for the graphical representation of data. They use elements such as charts or graphs to demonstrate relationships of data and simply show trends and patterns of important information to users.

“D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation” — D3.js

The way that this particular library does this is by harnessing the latest web standards including SVG (Scalable Vector Graphics — defines vector-based graphics in XML format), HTML (HyperText Markup Language) and Canvas API (which is a way to draw graphics on the fly using JS).

D3, or DDD, actually stands for Data-Driven Documents.

It is very similar if not the same to how to modern JS/TS frameworks bind data to their views through one or two-way binding. Essentially what this means is that when you create an element in your HTML, you bind the data you want to be associated to it and as that data changes the element its attach to reacts to those changes or vice versa.

Why does it have so much support?

  1. License

It’s Open Source, which is perfect if you’re looking to ship it as part of your product. If you’re not aware when a library is Open Source, this means that the library is free to use and may be modified and redistributed.

2. GitHub Project

d3/d3

At the time of writing this article, the D3.JS project has 92.2K stars in comparison to another popular data visualisation library ChartJS, that has 49.3K stars. So It’s supported and used by a lot of people.

It has had several releases since it began 10 years ago and is still being maintained, the latest release being v5.16 in April of 2020.

There are currently 0 bugs open, but they have closed 299.

#d3js #software-development #how-to #data analysis

Everything you Need to Know About D3.JS
1.70 GEEK