Saturday, August 11, 2018

Understand D3.js library | Pros and Cons

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

How d3.js works? 

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 Document object modal

Required skills to start learning

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

D3 pros or advantages 

It is very 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 Allows developer flexibility to customize and visualize as per requirement

Cons and disadvantages 

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

Setup and Install 

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

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


EmoticonEmoticon

Note: Only a member of this blog may post a comment.