<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"];
fruits.push("orange");
fruits.push("blueberry");
fruits.push("strawberry");</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 = [];
        let fruits = ["apple", "banana", "orange", "blueberry", "strawberry"];
        let viz = d3.select("#viz-area");
   
        function update(fruits) {
          viz.selectAll(".element")
            .data(fruits)
            .enter()
            .append("rect")
            .attr("class", "element")
            .attr("x", (d, i) => i * 105)
            .attr("y", 0)
            .attr("width", 100)
            .attr("height", 100)
            .style("opacity", 0)
            .transition().duration(1000)
            .style("opacity", 1);
          
          viz.selectAll(".elem-content")
             .data(fruits)
             .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(1000)
             .style("opacity", 1)
        }
        
        _fruits.push(fruits[0]);
        _fruits.push(fruits[1]);

        update(_fruits);
      
        for (let i = 2; i < fruits.length; i++) {
          setTimeout(() => {
            console.log(fruits[i])
            _fruits.push(fruits[i]);
            update(_fruits);
          }, 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.