JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

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

CSS

svg rect {
  fill: orange;
}

svg text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

JavaScript

var data2 = [20, 45, 30, 90];
var canvas = d3.select('body').append('svg').style('background', "LightGray").attr('height', 150).attr('width', 150);
canvas.selectAll('rect')
  .data(data2)
  .enter()
  .append('rect')
  .attr('y', 0)
  .attr('x', function(datum, index) {
    return index * 20;
  })
  .attr('width', 15)
  .attr('height', function(datum) {
    return datum;
  });