Datanado

Just for fun. This "datanado" is used three times in the data platform animation of the Stitch Fix Algorithms Tour.

<!DOCTYPE html>
<meta charset="utf-8">
<body>

var x_center = 480
var y_min = 200
var y_max = 300

var data_dots_colors = ["#CCDE66", "#AA7CAA", "#587868", "#F3A54A", "#4B90A6", "#52598B"]

var data_dots_start = []
for (var i=0; i<30; i++) {
  data_dots_start.push({x: 200 + Math.random() * 560,
                        y: 300 + Math.random() * 200,
                        fill: data_dots_colors[Math.floor(Math.random() * 6)]})
}

function datanado(t, x_center, y_min, y_max){

var delta_t = (t - 500) / 1000
  var data_points = d3.select("svg").selectAll("text")
                      .data(data_dots_start)

data_points
    .enter().append("text")
      .attr("fill", function(d){ return d.fill })
      .text(function(d) { return Math.floor(Math.random()*2) })
      .attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")" })

data_points
      .attr("transform", function(d){
          var x
          if (delta_t < 0.8) {
            x = (1 - delta_t) * d.x + delta_t * x_center
          } else {
            var v = (1 - delta_t) * d.x + delta_t * x_center
            x = x_center + Math.sin(v / 20.0) * 10
          }
          var v = (1 - delta_t) * d.y + delta_t * (y_max + y_min) / 2
          var y = ((y_max + y_min) / 2) + Math.sin(v / 100.0) * (y_max - y_min) / 2
          return "translate(" + x + "," + y + ")"
      })

}

d3.timer(function(t){
  datanado(t, x_center, y_min, y_max)
})

</script>

https://d3js.org/d3.v4.min.js