D3.js is a javascript library for manipulating DOM objects  based on data. we can create rich visualizations of data.

D3 provides a number of modules for helping us code many of thing that we need to create interactive data. Such as: Shapes, Scales, Layouts, Behaviors, Data-processing(JSON, CSV)

Simple case:

d3.select("body").selectAll("p")
.data([4, 8])
.enter().append("p")
.text(function(d) { return d + " squared is " + d*d + "!"; });

 
var jsonCircles = [
   {
    "x_axis": 30,
    "y_axis": 30,
    "radius": 20,
    "color" : "green"
   }, {
    "x_axis": 70,
    "y_axis": 70,
   "radius": 20,
   "color" : "purple"
  }];
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

var circles = svgContainer.selectAll("circle")
                          .data(jsonCircles)
                          .enter()
                          .append("circle");
Loading data from JSON file and using D3.js to visualization data

Loading data from JSON file and using D3.js to visualization data