This post is the short notes about D3.js (Data Driven Documents) framework, It is a JavaScript framework mainly used to generate charts using HTML, DOM, Canvas and SVG. Reference: https://github.com/mbostock/d3/wiki/API-Reference

Select, Append, Text:

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
d3.select("body")
 .append("p")
 .style("color","red")
 .attr("allign","center")
 .text("Hello World");
</script>

Basic SVG Shape:

var canvas=d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500);
var circle = canvas.append("circle")
 .attr("cx",250)
 .attr("cy",250)
 .attr("r", 50)
 .attr("fill","red");
var rect = canvas.append("rect")
 .attr("width",100)
 .attr("heiht",59);
                
var line = canvas.append("line")
 .attr("x1",0)
 .attr("y1",100)
 .attr("x2",400)
 .attr("y2",400)
 .attr("stroke","green")
 .attr("stroke-width",10);

Visualizing Data:

var dateArray = [20, 40, 50];
var canvas = d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500);
var bars = canvas.selectAll("rect")
 .data(dateArray)
 .enter()
  .append("rect")
  .attr("width",function(d){
   return d * 10;
  })
  .attr("height",50)
  .attr("y",function(d, i){
   return i * 50
  });

Scales:

var width = 500;
var height = 500;
var widthscale = d3.scale.linear()
 .domain([0,60])
 .range([0, width]);
var color = d3.scale.linear()
 .domain([0,40])
 .range([red,blue]);
var dateArray = [20, 40, 50];
var canvas = d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500);
var bars = canvas.selectAll("rect")
 .data(dateArray)
 .enter()
  .append("rect")
  .attr("width",function(d){
   return widthscale(d);
  })
  .attr("height",50)
  .attr("file", function(id){ return color(id})
  .attr("y",function(d, i){
   return i * 50
  });    

Groups and Axes:

var axis = d3.svg.axis()
 .ticks(5)
 .scale(widthscale);
var canvas = d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500)
 .append("g")
 .attr("transform","translate(20,0)")
 .call(axis);                
canvas.append("g")
 .attr("transform","translate(0,400)")
 .call(axis);

Enter, Update, Exit:

Dom elements < data elements(enter)
Dom elements > data elements(exit)
Dom elements = data elements(update)
var data = [10,20];
var canvas = d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500);
var circle = canvas.append("circle")
 .attr("cx", 50)
 .attr("cy", 50)
 .attr("r",25);
var circle = canvas.selectAll("circle")
 .data(data)
 .attr("file","red")
 .enter()
  .append("circle")
  .attr("cx", 50)
  .attr("cy", 50)
  .attr("r",25)
  .attr("color","green");

Transitions:

var canvas = d3.select("body")
 .append("svg")
 .attr("width",500)
 .attr("height",500);
var circle = canvas.append("circle")
 .attr("cx", 50)
 .attr("cy", 50)
 .attr("r",25);
circle.transition()
 .duration(1500)
 .delay(2000)
 .attr("cx",150)
 .transition()
 .attr("cy",150)
 .each("end",function(){
  d3.select(this).attr("fill","red");
 });

Loading External Data:

mydata.json file : {{"name":"harish","age",25},{"name":"chitra","age":22},{"name":"Kutty","age":23}}
d3.json("mydata.json",function(data){
    var canvas = d3.select("body").append("svg")
  .attr("width",500)
  .attr("height",500);              
 canvas.selectAll("rect")
  .deta(data)
  .enter()
   .append("rect")
   .attr("width", function(d{
    return d.age * 10;
   })
   .attr("height",48)
   .attr("y",function(d,i){
    return i*50;                    
   })
   .attr("fill",""blue);
 canvas.select("text")
  .data(data)
  .enter()
   .append("text")
   .attr("fill","white)
   .attr("y",function(d,i){
    return i*50;
   })
   .text(function(d){
    return d.name;
   });
    })
})
mydata.csv
"name","age"
"Harish",25
"Chitra",22
"Kutty",23

Paths:

var canvas = d3.select("body").append("svg")
 .attr("width",500)
 .attr("height",500);
var data =[
 {x:10, y:20},
 {x:40, y:60},
 {x:50, y:70},
];
var group = canvas.append("g")
 .attr("transform","translate(100,100)");
var line = d3.svg.line()
 .x(function(d){
  return d.x;
 })
 .y(function(d){
  return d.y;
 };
group.selectAll("path")
 .data(data)
 .enter()
  .append("path")
  .attr("d", line)
  .attr("fill","none")
  .attr("stroke","#000")
  .attr("stroke-width",10);

Arcs(Donut chart):

var data = [10,20,30];
var r = 300;
var color = d3.scale.ordinal()
 .range(["red","blue","orange"])
var canvas = d3.select("body").append("svg")
 .attr("width",500)
 .attr("height",500);
var group = canvas.append("g")
 .attr("transform","translate(100,100)");
var arc = d3.svg.arc()
 .innnerRadius(r-100)//innnerRadius(0) for piechart
 .outerRadius(r)
 
var pie = d3.layout.pie()
 value(function(d){
  return d;
 });
var arcs = group.selectAll("arc")
 .data(pie(data))
 .enter()
  .append("g")
  .attr("class","arc");
 
arcs.append("path")
 .attr("d",arc)
 .attr("fill", function(d){
  return color(d.data);
 });
arcs.append("text")
 .attr("transform", function(d){
  return "translate("+arc.centroid(d) +")";
 })
 .attr("text-anchor","middle")
 .attr("font-size",1.5em);
 .text(function(d){ 
  return d.data;
 });

Tree Layout:

{
    "name":"Shanmugam",
    "children" : [
        {
            "name":"Harish",
            "children":[
                {"name":"a"},
                {"name","b"},
                {"name","c"}
            ]
        },
        {
            "name":"chitra",
            "children":[
                {"name":"y"},
                {"name","z"}
            ]
        }
    ]
}

Just diagonal curve :

var canvas = d3.select("body").append("svg")
 .attr("width",500)
 .attr("height",500);
var diagonal = d3.svg.diagonal()
    .source({x:10, y:10})
    .target({x:300,y:300};

canvas.append("path")
 .attr("file","none")
 .attr("stroke","black")
 .attr("d", diagonal);
Full:
var canvas = d3.select("body").append("svg")
 .attr("width",500)
 .attr("height",500)
 .append("g")
 .attr("transform","translate(50,50)");
var tree = d3.layout.tree()
 .size([400,400]);
            
d3.json("mydata.json", function(data){
    var nodes = tree.nodes(data);
    var links = tree.links(nodes);
    var node = canvas.selectAll(.node)
  .data(nodes)
  .enter()
   .append("g")
   .attr("class","node")
   .attr("transform", funnction (d){
    return "translate(" + d.x +", "+ d.y + ")";
   })
    node.append("circle")
        .attr("r",5)
        .attr("fill","blue");
        
    node.append("text")
        .text(function(d){
            return d.name;
        });
    var diagonal = d3.svg.diagonal();
    //.projection(function (d) { reutrn [d.x, d.y]});
    canvas.selectAll(".link")
  .data(links)
  .enter()
   .append("path")
   .attr("class","link")
   .attr("fill","none")
   .attr("stroke","#ADADAD")
   .attr("d", diagonal);
})

Cluster Pack Bubble Layouts:

var canvas = d3.select("body").append("svg")
 .attr("width",500)
 .attr("height",500)
 .append("g")
 .attr("transform","translate(50,50)");
var pack = d3.layout.pack()
 .size([width, height-50])
 .padding(10);
d3.json("mydata.json", function(data){
    var nodes = pack.nodes(data);    
    var node = canvas.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
            .attr("class","node")
            .attr("transform", function(d){
                return "translate[" + d.x+ ","+d.y +")";                
            })
    node.append("circle")
        .attr("r",function(d){
            return d.r;
        })
        .attr("stroke","#ADADAD")
        .attr("stroke-width", 5);
        
    node.apppend("text")
        .text(function(d){
            return d.childer ? "" : d.name;
        })
});
});

Histogram:

var width = 500, height = 500, padding= 50;
d3.csv("ages.csv",function(data){
    var map = data.map(function(i){
        return parseInt(i.age);
    })
    var histgram = d3.layout.histogram()
        .bins(7)(map)
    var y = d3.scale.linear()
  .domain([0, d3.max[histogram.data(function(i){return i.length;})])
  .range([0, height]);
            
    var x = d3.scale.linear()
  .domain([0,d3.max(map)])
  .range([0,width])
    var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
    var canvas = d3.select("body").append("svg")
        .attr("width",500)
        .attr("height",500);
    var group = canvas.append("g")
        .attr("transform","translate[20,0]")
    var bars = canvas.selectAll(".bar")
        .data(histogram)
        .enter()
        .append("g")
    bars.append("rect")
        .attr("x", function(d){
            return d.x * 5;
        })
        .attr("y", 0)
        .attr("width", function(d){
            return d.dx * 5;
        })
        .attr("height", function(d){
            return d.dy *5;
        })
        .attr("fill","blue")
    bars.append("text")
        .attr("x", function(d){ return x[d.x})
        .attr("y", function(d){ return 500 - y[d.y];})
        .attr("dy",200px)
        .attr("fill", green)
        .attr("text-anchour","middle")
        .text(function(d){return d.y;})
});