JSFiddle - React, Tailwind, and code Playground

by licano

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<h1>Text</h1>
<svg></svg>

JavaScript

/*
var dataset=[1,2,3,4,5,6];
d3.select('body')
.selectAll('p')
.data(dataset)
.enter()
.append('p')
.text(d=> d)
*/

//var dataset=[80, 100, 56, 120, 180, 30, 40, 120, 160]
var dataset=[8, 1, 5, 2, 8, 3, 4, 2, 6]
var svgWidth=500, svgHeight=300, barPadding=5;
var barWidth= svgWidth/dataset.length;

var svg= d3.select('svg')
		.attr("width", svgWidth)
    .attr("height", svgHeight);
    
var yScale=d3.scaleLinear()
		.domain([0, d3.max(dataset)])
    .range([0, svgHeight])
 
var barChart= svg.selectAll("rect")
		.data(dataset)
    .enter()
    .append("rect")
    .attr("y", d=> svgHeight-yScale(d))
    .attr("height", d=>yScale(d))
    .attr("width", barWidth-barPadding)
    .attr("transform", (d,i)=>{
    	var translate=[barWidth * i, 0];
      return "translate(" + translate +")";
    })
    
var texts= svg.selectAll("text")
		.data(dataset)
    .enter()
    .append("text")
    .text(d=>d)
    .attr("y", d=> svgHeight - yScale(d) - 2)
    .attr("x", (d,i)=> barWidth * i)
    .attr("fill", "#A64C38")