JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="chart"></svg>

CSS

.chart .bar {
  fill: #135093;
}

JavaScript

var data = [
    {"date": new Date("1992-05-01 00:00:00"), "value": 10}, 
    {"date": new Date("1997-05-01 00:00:00"), "value": 110}, 
    {"date": new Date("2007-05-11 00:00:00"), "value": 34}
];
    
var width =  300;
var height = 200;
var barWidth = width / data.length;

var x_domain = d3.extent(data, function(d) { return d.date; });

var x = d3.time.scale()
                   .domain(x_domain) 
                   .rangeRound([0, width]);

var y = d3.scale.linear()
                .domain([0, d3.max(data, function(d) { return d.value; })])
                .range([height, 0]);

var chart = d3.select(".chart")
              .attr("width", width )
              .attr("height", height )            
              .append("g")
              .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

var bar = chart.selectAll("g")
               .data(data)
               .enter().append("g")
               .attr("transform", function(d, i) { 
                 return "translate(" + i * barWidth + ",0)"; 
               });

bar.append("rect")
    .attr("class", "bar")
    .attr("y", function(d) { 
        return y(d.value);
    })
    .attr("height", function(d) { 
      return height - y(d.value);
    })
    .attr("width", barWidth - 1);