D3js , Javascript Library helps us to put life in our data.

ABSTRACT

This is a library which helps us to put life into our data.

PRE-REQUISITE

Basics must be clear for Javascript and Jquery.

D3.js is a javascript library which is used to Modify your documents on the basis of data. D3 js uses HTML, SVG, and CSS to bring your data to life. It gives emphasis on web-standards which give you full capabilities of a data-driven approach to DOM manipulation.

You can use it directly by downloading it or by adding the script :

<script src="https://d3js.org/d3.v5.min.js"></script>

We can apply D3 js data-driven transformations by binding our data with the document. For eg. It helps you generate an HTML table from an array of numbers and the same data can be used to create an SVG bar chart with smooth transitions.  

Selections

Altering archives utilizing the W3C DOM API is dull: the technique names are verbose, and the basic approach requires manual cycle and accounting of impermanent state. For example to change the text color of a heading.

 
var heading = document.getElementsByTagName("h1");
for (var i = 0; i < heading.length; i++) {
  var heading = heading.item(i);
  heading.style.setProperty("color", "white", null);
}

D3 uses a declarative approach by operating on arbitrary sets of nodes called selections, like the above code can be written as: 
d3.selectAll("h1").style("color", "white");

Dynamic Properties

Attributes and other properties can be specified as a function of data in D3, rather than simple constants. Despite being simple these functions are really powerful like d3.geoPath function. It provides built-in functions which can be reused and also provides function factories for the line, area, and pie charts. 

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

Enter and Exit 

By using d3's enter and exit you get the power to create new nodes based on incoming data and remove outgoing nodes which are no longer required. Your data is bound with a selection and each element in the array is linked with a particular node in the selection and your nodes depend upon your data.

 
d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return "I’m number " + d + "!"; });
 
// Update…
var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });
 
// Enter…
p.enter().append("p")
    .text(function(d) { return d; });
 
// Exit…
p.exit().remove();

REFERENCE  :  https://d3js.org/

By controlling these three cases separately, you can specify that which operation runs on which nodes. It improves the performance of the implementation and makes it look more good. For example, we can initialize a basic old chart by adding bars., and then transition entering bars to the new scale along with the updating and exiting bars. 

CONCLUSION

It helps us to build the applications more Lively and also it can add great user interface and interaction.

Thanks, I hope this will help.