JSFiddle - React, Tailwind, and code Playground

CSS

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

JavaScript

var x = d3.scale.identity().domain([0, 200]);

var chart = d3.select("body")
    .append("svg")
    .attr("class", "chart")
    .attr("width", 250)
    .attr("height", 100)
    .append("g")
    .attr("transform", "translate(10,20)");

var Axis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(5);

chart.append('g')
    .attr("class", "axis")
    .call(Axis);

var brush = d3.svg.brush()
    .x(x);

brush.extent(x.domain());

chart.append("g")
    .call(brush)
    .selectAll("rect")
    .attr("y", -10)
    .attr("height", 10);