JSFiddle - React, Tailwind, and code Playground

CSS

html, body {
    height: 100%;
}

JavaScript

var panel = d3.select('body');
var width = panel[0][0].clientWidth - 2;
var height = panel[0][0].clientHeight - 2;
var svg = panel.append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('border', 'solid black 1px');
 
var tabulate_function = function(f, a, b, count) {
    var f_data = [];
    var width = b - a;
    for(var i=0; i < count; i++) {
        f_data.push(f(a + i * width / count));
    }
    return f_data;
};
var BARS_COUNT = 100;
var data = tabulate_function(Math.sqrt, 0, 10, BARS_COUNT);
var data2 = tabulate_function(function (x) { return Math.sin(x) + 1}, 0, 10, BARS_COUNT);

var update_graph = function(data) {
var bar_width = width / data.length;
var bars = svg.selectAll('rect').data(data);

bars.enter().append('rect');

bars
    .attr('x', function(d, i) { return i * bar_width })
    .attr('width', bar_width)
    .transition().duration(2000)
    .attr('y', function(d) { return height - d * 100 })
    .attr('height', function(d) { return d * 100 });
    
bars.exit().remove();  
};
update_graph(data);
setTimeout(function() {update_graph(data2)}, 1000);