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 bars = svg.selectAll('rectangle').data(data);

var bar_width = width / BARS_COUNT;

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

bars
    .attr('y', function(d) { return height - d * 100 })
    .attr('x', function(d, i) { return i * bar_width })
    .attr('width', bar_width)
    .attr('height', function(d) { return d * 100 });