JSFiddle - React, Tailwind, and code Playground

by Paul Lan

HTML

<h3 id="d3">sdfdf</h3>

JavaScript

var canvas = d3.select('body').append('svg').attr('width', 600).attr('height', 600);

var myArray = [10, 29, 33];

var theBarG = canvas.append('g');

var bars = theBarG.selectAll('rect')
.data(myArray)
.enter()
.append('rect')
.attr('width', function(d, i){
    return d * 10 + 30;
})
.attr('height', 100)
.attr('y', function(d, i){
    return i * 150;
})

theBarG.selectAll('text')
.data(myArray)
.enter()
.append('text')
.attr('y', function(d, i){
    return i * 150 + 55
})
.style({'stroke':'#FFFFFF', 'stroke-width' : 0.5 , 'font-size': '20'})

.text(function(d, i){
    return 'The ' + (i + 1) + ' Rectangle'
})