JSFiddle - React, Tailwind, and code Playground

by mercat618

HTML

<div class="data"></div>
<div class="viz">
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

SCSS

.data {
  outline: 1px solid #777777;
  min-width: 10px;
  height: 300px;
  background-color: rgb(238, 238, 238);
  display: inline-block;
  vertical-align: top;
  p {
    margin: 0.7em;
  }
}

.viz {
  display: inline-block;
  canvas {
    outline: 1px solid #777777;
  }
}

JavaScript

(() => {
  // data container script
  $(() => {
    let $dataContainer = $('.data');
    setInterval(() => {
      $dataContainer.empty();
      let numbers = [];
      for (let i = 0; i < 10; i++) {
        let randNumber = Math.floor(Math.random() * 100);
        numbers.push(randNumber);
        $dataContainer.append(`<p>${randNumber}</p>`);
      }
      $(document).trigger('data:updated', [numbers])
    }, 1000);
  });

  // actual canvas render
  $(() => {
    // boring stuff
    let base = d3.select(".viz");
    let chart = base.append("canvas")
      .attr("width", 30)
      .attr("height", 300);

    let context = chart.node().getContext("2d");

    let detachedContainer = document.createElement("custom");
    let dataContainer = d3.select(detachedContainer);
  
    // d3 stuff and data binding
    drawCustom = (data) => {
      let scale = d3.scaleLinear()
        .domain(d3.extent(data))
        .range([10, 280]);

      let dataBinding = dataContainer.selectAll("custom.rect")
      	.data(data, (d) => { return d; });

      // for new elements, create a 'custom' dom node, of class rect
      // with the appropriate rect attributes
      dataBinding.enter()
        .append("custom")
        .classed("rect", true)
        .attr("size", 0)
        .attr("x", 11)
        .attr("y", scale)
        .transition()
        .duration(500)
        .attr("size", 8)
        .attr("fillStyle", "red");

      // for exiting elements, change the size to 5 and make them grey.
      dataBinding.exit()
        .transition()
        .duration(500)
        .attr("size", 0)
        .remove()
    }
  
    let drawCanvas = () => {
      // clear canvas
      context.fillStyle = "#fff";
      context.rect(0,0,chart.attr("width"),chart.attr("height"));
      context.fill();

      let elements = dataContainer.selectAll("custom.rect");
      elements.each(function(d) {
        let node = d3.select(this);

        context.beginPath();
        context.fillStyle =...