Skip to main content

Brief Introduction to D3.js

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;})
});

Comments

Post a Comment

Popular posts from this blog

Install Hadoop 2.5.1 on Windows 7 - 64Bit Operating System

This post is about installing Single Node Cluster Hadoop 2.5.1 (latest stable version) on Windows 7 Operating Systems.Hadoop was primarily designed for Linux platform. Hadoop supports for windows from its version 2.2, but we need prepare our platform binaries. Hadoop official website recommend Windows developers to use this build for development environment and not on production, since it is not completely tested success on Windows platform. This post describes the procedure for generating the Hadoop build for Windows platform. Generating Hadoop Build For Windows Platform Step 1:Install Microsoft Windows SDK 7.1 In my case, I have used Windows 7 64 bit Operating System. Download Microsoft Windows SDK 7.1 from Microsoft Official website and install it. While installing Windows SDK,I have faced problem like C++ 2010 Redistribution is already installed. This problem will happen only if we have installed C++ 2010 Redistribution of higher version compared to the Windows SDK. ...
24 comments
Read more

Install Spring Tool Suite on Ubuntu

This post is about installing Spring Tool Suite (STS) on Ubuntu. The Spring Tool Suite is an Eclipse-based development environment that is customized for developing Spring applications. Step 1: Download the latest Spring Tool Suite for Linux from STS official website: http://spring.io/tools/sts/all  Step 2: Extract into any folder which you prefer. My extracted Spring Tool Suite locations is /home/harishshan/springsource Step 3: Create the Menu icon for quick access sudo nano /usr/share/applications/STS.desktop Step 4: Enter the following content [Desktop Entry] Name=SpringSource Tool Suite Comment=SpringSource Tool Suite Exec=/home/harishshan/springsource/sts-3.4.0-RELEASE/STS Icon=/home/harishshan/springsource/sts-3.4.0-RELEASE/icon.xpm StartupNotify=true Terminal=false Type=Application Categories=Development;IDE;Java; Step 5: Now you can check from Quick Menu by typing " Spring "
10 comments
Read more

How to fix Kindle wrong time left in chapter book

The most of kindle reader use the time left in chapter or time left in book options provided at left bottom of the page to estimate completing the book or the current chapter. But sometimes it was not  accurate and displaying 5 min left in chapter instead of 30 min left in chapter. To fix this issue just type ;ReadingTimeReset at search field and enter. Kindly refer the photo for the same.
9 comments
Read more