JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

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

<svg class="chart">

</svg>

CSS

rect {
  fill: steelblue;
}

JavaScript

var data = [1.4, 1.5, 1.6, 3];
		const width = 500;
    const height = 500;
    const barHeight = 60;
    const margin = {top: 10}
    const x = d3.scaleLinear().domain([0, 5]).range([0, 500]);

    const xAxis = d3.axisBottom(x);

    const chart = d3.select('.chart').attr('width', width).attr('height', barHeight * data.length);


    chart.append('g').attr('class', 'x axis')
    	.attr('transform', 'translate(0, '+height+')').call(xAxis);

    const bar = chart.selectAll('g.bar').data(data).enter().append('g').classed('bar', true).attr('transform', function(d, i) {
      return 'translate(0,' + i * barHeight + ')';
    });

    bar.append('rect').attr('width', x).attr('height', barHeight - 1);
    bar.append('text').attr('x', function(d) { return x(d) - 3; })
    .attr('y', barHeight / 2)
    .attr('dy', '.35em')
    .text(function(d) { return d; });