Simple Line Chart Using D3 js with Animation, Value points and Tooltip ~ ●.. My B.Tech ..● 2K8618.blogspot.com

Simple Line Chart Using D3 js with Animation, Value points and Tooltip

A Simple Line Chart Using D3 js with Animation, Value points and Tooltip

Inspired from great visualizations of data using d3js.org, a simple line chart using d3js with animation, value points and tooltip.

<!DOCTYPE html>
<html>
<head>
<style>
svg{
 background-color : none;
}
.axis{
 stroke : #0000001;
 fill : silver;
}
#tooltip{
 position : absolute;
 border : 1px solid #000;
 background-color : #ddd;
 padding : 5px;
 padding-left: 15px;
 padding-right : 15px;
 border-radius : 5px;
}


</style>
<script src="https://cdn.jsdelivr.net/d3js/3.4.12/d3.min.js" type="text/javascript"></script>
</head>
<body>
<svg id="my-line-chart" width="600" height="600"></svg>
<div id="tooltip"></div>
<script>
 drawLineChart();
 function drawLineChart(){

  var chartArea=d3.select('#my-line-chart');
  var lineData=[ { x: 0, y: 5},{ x: 20, y: 50 },{ x: 30, y: 45 },{ x: 40, y: 100 },{ x: 50, y: 65 },
    { x: 60, y: 75 },{ x: 70, y: 15 },{ x: 80, y: 85 },{ x: 90, y: 30 },{ x: 100, y: 0 }];

  //setting scale functions
  var xScale=d3.scale.linear().range([0,500]).domain(d3.extent(lineData, function(d){ return d.x;}));
  var yScale=d3.scale.linear().range([500,0]).domain(d3.extent(lineData, function(d){ return d.y;}));
  
  //setting axis functions
  xAxis = d3.svg.axis().scale(xScale).tickSize(2);
  yAxis = d3.svg.axis().scale(yScale).tickSize(2).ticks(20).orient("left");
  
  //drawing axes
  chartArea.append('g').attr('class','x axis').call(xAxis).attr('transform', 'translate(30,510)');
  chartArea.append('g').attr('class','y axis').call(yAxis).attr('transform', 'translate(30,10)');
  
  //line path generator function
  var linePathGenerator = d3.svg.line().x( function(d){
   return xScale(d.x);
  }).y(function(d){
   return yScale(d.y);
  });
  
  //drawing line 
  var linePath=chartArea.append('path').datum(lineData)
  .attr({
   'd' : linePathGenerator,
   'fill': 'none',
   'transform': 'translate(30,10)',
   'stroke': 'rgb(9, 112, 184)',
   'stroke-width' : 3
  });
  
  // animation 
  var pathLength = linePath.node().getTotalLength();
  linePath.attr({
   "stroke-dasharray" : pathLength  + " " + pathLength,
   "stroke-dashoffset" : pathLength
  }).transition().duration(3000).ease("linear")
  .attr("stroke-dashoffset", 0);
   
   //points
  var circlePoints=chartArea.selectAll('circle')
  .data(lineData)
  .enter()
  .append('circle')
  .attr({cx :  function(d){
   return xScale(d.x)+30;
  }, cy : function (d){
   return yScale(d.y)+10;
  }, r :8,
  fill : 'silver' 
  });
  
  // tooltip
  var div= d3.select('#tooltip');
  circlePoints.on("mouseover", function(d) {      
   div.transition()        
    .duration(200)      
                .style("opacity", .9);      
            div.html(d.y)  
               .style("left", (d3.event.pageX) + "px")     
               .style("top", (d3.event.pageY - 28) + "px");    
        }).on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });
}
</script>
</body>
</html>