Understand D3.js library | Pros and Cons

Understand D3.js library | Pros and Cons

D3.js alias Data-Driven Document is an open-source popular javascript library for creating visualized graphs using dynamic data. It enables the developer to take input data and render output in visual graphs/diagrams using HTML, canvas, and SVG elements. It is an extended version of Protovis where protovis only works with static data.

How d3.js works in javascript

It is a visualization framework and a front-end library of your web application. Data manipulation comes from the backend. This library creates a visualization for binding data and graphical elements to the Document object modal.

Required skills to start learning

Below are web standards you have to learn before using this library. Understand the latest Html5 specification. It uses canvas, SVG(scalable vector graphics), and HTML elements Understanding how DOM works CSS - cascading style sheets. Javascript

D3 pros or advantages

It is simple to use as it is based on HTML/CSS/javascript technologies Opensource Community and a lot of usage examples Lightweight library and size of this library comes around 200k Great looking diagrams Allow developer flexibility to customize and visualize as per requirement.

D3js Cons and disadvantages

  • Learning curve - It takes a lot of time for developers to have a good understanding of concepts.
  • Old browsers are not supported
  • Difficult for creative visual design graphs.

D3js Setup and Install

We will see how we can use this library in an application. This library can be used in HTML or as an npm library. Now we will see how we can use the library on HTML pages. Installation is simple. you can include the CDN library in the script tag of your HTML. It will have access to all objects of the d3.js library.

D3js Hello World Example

<html>
   <head>
   </head>
   <body>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <script>
         d3.select("body").append("span")
             .text("Test programm");
      </script>
   </body>
   <html>

D3 has a concept of selector API like jquery selectors to select HTML dom elements In this example, used the select method to select boy element, Appending span element and add text to display it There are various selectors same like selectors in jquery d3.select(‘tag’)- select the dom element like div/span/body d3.select(‘#id’) - select the elements based on id d3.select(‘.cssclass’)- select the elements based on CSS class This is a basic understanding of d3js library. I will post various examples with explanations in my future posts