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>
