d3.js Simple Responsive Line Graph with Animation: Part 2

I’m back for another addition of d3.js for noobs. I’m a professional developer but I’m no d3.js pro, but I believe I’ve learned a few things that could be useful.

marginContainer.append( 'path' )
    .datum( startData )
    .attr('class', 'line')
    .attr( 'd', line )
    .duration( 500 )
    .attrTween( 'd', function() {
      var interpolator = d3.interpolateArray( startData, data );

      return function( t ) {
        return line( interpolator( t ) );
    } )
    .each('end', function() {
      drawCircles( data, marginContainer );

So last time we got to the point where we’re calling the drawCircles() function. When you use .each('end', function(){ the function gets called at the end of each selection. In this case we only have one selection.

Read More

d3.js Simple Responsive Line Graph with Animation

While introducing myself to the fantastic data visualization library d3.js I figured I might as well post some of the things I’ve learned.

I needed a responsive line graph with just a little bit of animation to give my graph some life. I also wanted to be able to see details of the exact plot points on the graph. Lastly I wanted the graph to be able to animate if the data was ever swapped out for new data. After a little bit of work the result was the following graph below. The code is far from perfect but it’s definitely a starting point.

See the Pen d3.js Simple Responsive Line Graph with Animation by Tawin Kiethanom (@tawink) on CodePen.

Read More