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>