D3js Study Concepts

D3.js Easing Checker

http://bl.ocks.org/katsumitakano/9929724

Animate along a path

http://bl.ocks.org/JMStewart/6455921

Animation Teams

code

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
  <script>
    let opts = ['👏', '💖', '🍦', '👾']
    setInterval(() => {
      d3.select('body')
        .append('span')
        .text(d => opts[Math.floor(Math.random()*opts.length)])
        .style('position', 'fixed')
        .style('bottom', '-20px')
        .style('left', Math.random()*1400+'px')
        .transition()
        .duration(2000)
        .style('bottom', 100+Math.random()*500+'px')
        .transition()
        .duration(2000)
        .style('bottom', Math.random()*200+'px')
        .style('opacity', '0')
        .transition()
        .duration(2000)
        .remove()
    }, 8)
  </script>
</body>
</html>