JSFiddle - React, Tailwind, and code Playground

HTML

<p>x-axis</p>
<div id="diagram"></div>

CSS

.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }

JavaScript

var svgWidth = 500;
  var svgHeight = 500;
  var svgAxisPadding = 20;
  
  var xScale = d3.scale.log()
    .domain([Math.pow(10, 5), Math.pow(10, 7)])
    .range([svgAxisPadding, svgWidth - svgAxisPadding]);

  var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(0, "e");

  var svg = d3.select('#diagram')
    .append('svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight);

  svg.append('g')
    .attr("class", "axis")
    .call(xAxis);