D3 Examples - Animated Linechart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
​
    #linechart {
        height: 500px;
        width: 500px;
        margin: 0 auto;
    }
  </style>
</head>
​
<body>
  <div id="linechart"></div>
  <script>
    
var data = [
    { date: '2015-09-01', submissions: 210 },
    { date: '2015-10-01', submissions: 24 },
    { date: '2015-11-02', submissions: 241 },
    { date: '2015-12-03', submissions: 244 },
    { date: '2016-01-04', submissions: 122 },
    { date: '2016-02-05', submissions: 240 },
    { date: '2016-03-06', submissions: 500 },
    { date: '2016-04-07', submissions: 123 },
    { date: '2016-05-08', submissions: 411 },
    { date: '2016-06-09', submissions: 700 },
    { date: '2016-07-10', submissions: 52 },
    { date: '2016-08-11', submissions: 100 },
    { date: '2016-09-12', submissions: 103 },
    { date: '2016-10-13', submissions: 241 },
    { date: '2016-11-14', submissions: 412 },
    { date: '2016-12-15', submissions: 23 },
    { date: '2017-01-16', submissions: 700 },
    { date: '2017-02-17', submissions: 500 }
];
​
​
var svg = d3.select('#linechart').append('svg').attr('height', '500px').attr('width', '500px');
​
var xExtent = d3.extent(data, function(d, i) { return d.date; });
var yExtent = d3.extent(data, function(d, i) { return d.submissions; });
​
var xScale = d3.scaleTime()
    .domain([ new Date(xExtent[0]), new Date(xExtent[1]) ])
    .range([40,495]);
​
var yScale = d3.scaleLinear()
    .domain(yExtent)
    .range([460,240]);
​
​
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
​
svg.append('g')
    .attr('id', 'xAxisG')
    .attr('transform', 'translate(0,460)')
    .call(xAxis);
​
svg.append('g')
    .attr('id', 'yAxisG')
    .attr('transform', 'translate(40,0)')
    .call(yAxis);
​
var submissionsLine = d3.line()
    .x(function(d) {
        return xScale(new Date(d.date));
    })
    .y(function(d) {
        return yScale(d.submissions);
    })
    .curve(d3.curveCatmullRom.alpha(0.5));
​
​
var path = svg.append('g').append('path')
    .attr('d', submissionsLine(data))
    .attr('fill', 'none')
    .attr('stroke', '#36F200')
    .attr('stroke-width', 3);
​
var totalLength = path.node().getTotalLength();
​
path
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(2000)
    .ease(d3.easeCubicInOut)
    .attr("stroke-dashoffset", 0);
​
svg.append('g')
    .selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('fill', '#24E0FB')
    .attr('r', 0)
    .attr('cx', function(d, i) {
        return xScale(new Date(d.date));
    })
    .attr('cy', function(d, i) {
        return yScale(d.submissions);
    })
    .on('mouseover', function(d, i) {
        d3.select(this)
            .transition()
            .duration(300)
            .attr('r', 50);
    })
    .on('mouseleave', function(d, i) {
        d3.select(this)
            .transition()
            .duration(300)
            .attr('r', 3);
    })
    .transition()
    .duration(500)
    .delay(1800)
    .attr('r', 5)
    .transition()
    .duration(500)
    .attr('r', 3);
​
​
​
​
  </script>
</body>
​
    