<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/pastel-on-dark.min.css"/>
  </head>
  <body>
    <div id="code-area">
      <textarea>let fruits = ["apple", "banana", "orange", "blueberry", "strawberry"];
while (fruits.length) {
  fruits.shift();     
}</textarea>
      <svg id="viz-area"></svg>
    </div>
    
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>
    <script>
        let editor = CodeMirror.fromTextArea(document.querySelector("textarea"), {
            theme: "pastel-on-dark",
            mode: "text/javascript"
        });
        let _fruits = ["apple", "banana", "orange", "blueberry", "strawberry"];
        let viz = d3.select("#viz-area");

        function update(fruits) {
          let u = viz.selectAll(".element")
            .data(fruits, d => d)
          
          u.exit()
            .transition().duration(500)
            .style("opacity", 0);  
          
          u.enter()
            .append("rect")
            .attr("class", "element")
            .attr("y", 0)
            .attr("width", 100)
            .attr("height", 100)
            .style("opacity", 1)
          .attr("x", (d, i) => i * 105)
           
            u.transition().duration(1000)
            .attr("x", (d, i) => i * 105)
          
          u = viz.selectAll(".elem-content")
             .data(fruits, d => d)
          
             u.enter()
             .append("text")
             .attr("class", "elem-content")
             .attr("x", (d, i) => i * 105 + 50)
             .attr("y", 50)
             .text(d => d)
             .style("opacity", 0)
             .transition().duration(500)
             .style("opacity", 1)
          
          u.transition().duration(1000).attr("x", (d, i) => i * 105 + 50)
          
          u.exit()
            .transition().duration(500)
            .style("opacity", 0);
        }

        update(_fruits);
              
        for (let i = 0; i < _fruits.length; i++) {
          setTimeout(() => {
            _fruits.shift();  
            update(_fruits);
          }, 3000 + i * 1000)
        }
    </script>
  </body>
</html>
body {
  background-color: #302c2b;
}

.CodeMirror {
  height: auto !important;
}

#code-area {
  margin: 0px auto;
  max-width: 700px;
}

#viz-area {
  margin-top: 15px;
  width: 100%
}

.element {
  fill: #50A2A7;
}

.elem-content {
  text-anchor: middle;
  stroke: none;
  fill: #302C2B;
  font-size: 14px;
}
d3.select("body");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.