JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

CSS

rect {
	fill: teal;
}

JavaScript

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	
var bars = svg.selectAll(".myBars")
	.data(data)
	.enter()
	.append("rect");
	
bars.attr("x", 10)
	.attr("y", function(d,i){ return 10 + i*40})
	.attr("width", function(d){ return d})
	.attr("height", 30);

var texts = svg.selectAll(".myTexts")
	.data(data)
	.enter()
	.append("text");

texts.attr("x", function(d){ return d + 16})
	.attr("y", function(d,i){ return 30 + i*40})
	.text(function(d){ return d});