JSFiddle - React, Tailwind, and code Playground

sampling d3.js library

by jonchius

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>test in d3</h1>

<nav>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</nav>

<div class="chart">
</div>

<!-- you must include d3 code in an actual html file -->

JavaScript

setStyles();
setTransition();
setChart(10);

function setStyles() {
  // just like jQuery $("body").css("(property)", "(value)");
  // d3 allows "method chaining" (calling many methods with one object call)
  d3.select("body")
    .style("font-family", "Arial, Helvetica, sans-serif")
    .style("background-color", "#fff")
    .style("color", "#000");
  d3.select("nav")
    .style("padding", "10px")
    .style("margin-bottom", "10px");
}

function setTransition() {
  // fade the background from black to gray in 5 seconds
  d3.select("nav")
    .transition()
    .style("background-color", "#666")
    .duration(5000);
}

function setChart(numberOfBars) {

  var data = [];

  for (var i = 0; i < numberOfBars; i++) {
    // make each data value between 0 and 255 (256 shades in each primary color)
    data.push(Math.floor(Math.random() * 255));
  }

  var max = Math.max(...data);

  d3.select(".chart")
    .selectAll("div")
    .data(data)
    .enter().append("div")
    // width depends on data value
    .style("width", function(d) {
      return d + "px";
    })
    // shade of blue depends on data value
    .style("background", function(d) {
      return "rgba(0, " + d + ", 0,  1)";
    })
    .style("padding", "20px")
    .text(function(d) {
      return d;
    });

}