JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="diagramm"></div>

CSS

.bar {
  display: inline-block;
  width: 20px;
  margin: 0 2px;
  padding: 3px;
  color: #fff
}

JavaScript

/* простая функция генерации массива из 5 случайных положительных целых чисел в диапазоне 0..100 */
function numRand(max) {
  if (!max || max < 0 || max > 100)
    return false;
  var arr = [];
  for (var i = 0; i < 5; i++)
    arr[i] = Math.round(Math.random() * max);
  return arr;
}
var randData = numRand(50);

/* рисуем диаграмму */
var diagramm = d3.select("#diagramm");
diagramm
  .selectAll("span")
  .data(randData)
  .enter()
  .append("span")
  .classed("bar", true)
  .style("height", function(d, i) {
    return 3 * d + "px"
  })
  .style("background-color", function(d, i) {
    return "hsl(200,80%," + (50 - d / 2) + "%)";
  })
  .text(String);