JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg width="200" height="500"></svg>
</body>

CSS

path.domain {
    fill: none;
    stroke: black;
}

line { stroke: black; }

JavaScript

var bytesToString = function (bytes) {
        var fmt = d3.format('.0f');
    if (bytes < 1024) {
        return [fmt(bytes), 'B'];
    } else if (bytes < 1024 * 1024) {
        return [fmt(bytes / 1024), 'kB'];
    } else if (bytes < 1024 * 1024 * 1024) {
        return [fmt(bytes / 1024 / 1024), 'MB'];
    } else {
        return [fmt(bytes / 1024 / 1024 / 1024), 'GB'];
    }
}

var xScale = d3.scale.log()
               .domain([1, Math.pow(2, 40)])
               .range([0, 450]);
                   
var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('left')
                .tickValues(d3.range(11).map(function (x) { return Math.pow(2, 4 * x); }))
                .tickFormat('');

d3.select('svg')
  .append('g')
  .attr('transform', 'translate(180, 30)')
  .call(xAxis)
  .selectAll('text')
  .selectAll('tspan')
  .data(function (d) { return bytesToString(d); })
  .enter()
  .append('tspan')
  .attr('x', 0)
  .attr('dx', '-1em')
  .attr('dy', function (d, i) { return (-2 * i) + 'em'; })
  .text(String);