JSFiddle - React, Tailwind, and code Playground

by Camilo Escobar Velásquez

HTML

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

JavaScript

data=[12,34,54,65,23,54,21,36,45,67,85,45,65,78,97]
var BAR_SIZE = 20;
var sColor = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body").append("svg");
svg.attr("id","d3Tut")
	.attr("width",500)
  .attr("height", 500)
  
var sA = svg.selectAll("rect")
						.data(data);
            
var ent = sA.enter()
						.append("rect")
            .attr("x", function(d,i){return (BAR_SIZE*i)+1})
            .attr("y",function(d,i){return 100-d})
            .attr("width",BAR_SIZE)
            .attr("height",function(d){return (BAR_SIZE*5)+d})
            .style("fill", function(d,i){return sColor(i)})