JSFiddle - React, Tailwind, and code Playground

by nachocab

JavaScript

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 300 - margin.bottom - margin.top;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var n = 20,
    rect_width = 20,
    padding = 1, 
    speed = 500,
    item_delay = 100;

var x = d3.scale.ordinal()
    .domain(d3.range(n))
    .rangePoints([0, n * (rect_width + padding)]);

var rects = svg.selectAll(".rect")
    .data(x.domain())
  .enter().append("rect")
    .attr("x", function(d,i){ return x(i); })
    .attr("height", rect_width)
    .attr("width", rect_width)
    .attr("class", "rect")
    .attr("y", 0); // up - very important, if you don't set this, there is no interpolation

var loop_duration = 2000;
(function loop(){
    rects.transition()
        .delay(function(d,i){ return i * item_delay; })
        .duration(speed)
        .attr("y", 100) // down
      .transition()
        .attr("y", 0)
    setTimeout(loop, loop_duration)
})()