Testing out animating d3 paths with varying numbers of points. Top one is standard and other using d3-interpolate-path plugin. More information in this awesome blog post: Improving D3 Path Animation
forked from eesur's block: d3 | path animation
xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <!-- https://www.basscss.com/ --> <link href="//npmcdn.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet"> <!-- https://clrs.cc/ --> <link href="//s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet"> <style> body { font-family: Consolas, monaco, monospace; background: #dfe0e2; color: #2f292b; } path { fill: none; stroke: #f45844; stroke-width: 2; } </style></head><body> <section> <h1 class="h5 caps">standard</h1> <svg width="960" height="200"> <g translate="transform(10, 10)"> <path id="path-normal"></path> </g> </svg> </section> <hr> <section> <h1 class="h5 caps">using interpolate</h1> <svg width="960" height="200"> <g translate="transform(10, 10)"> <path id="path-interpolate"></path> </g> </svg> </section> <hr> <footer> <h1 class="h5 caps">svg path: (same for both)</h1> <p id="path-data"></p> </footer><script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script><script src="d3-interpolate-path.min.js" charset="utf-8"></script><!-- d3 code --><script src=".script-compiled.js" charset="utf-8"></script><!-- render code --><script> // create array of random objects for line data function data() { let _data = d3.range(Math.floor(d3.randomUniform(10, 90)())) .map(function(n, i) { return { 'x': i *10, // constrain x 'y': Math.floor(d3.randomUniform(200)()) } }) // console.info(_data) return _data } drawLine('#path', data()) d3.interval(function() { return drawLine(data(), '#path-normal', '#path-interpolate') }, 3000) d3.select(self.frameElement).style('height', '670px');</script></body></html> https://d3js.org/d3.v4.min.js