JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content'>
    <!-- /the chart goes here -->
</div>

CSS

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}
.chart {
}
.main text {
    font: 10px sans-serif;
}
.axis line, .axis path {
    shape-rendering: crispEdges;
    stroke: black;
    fill: none;
}
circle {
    fill: steelblue;
}

JavaScript

var color = d3.scale.category10();

var data = [
    
	[2,2],
	[3,3],
	[4,4],
    [5, 4],
    [5.5, 5],
    [6, 6],
    [6, 7],
    [7,8],
    [7,9],
    [8,10],
    [8,11]
	
];

var margin = {
    top: 20,
    right: 15,
    bottom: 60,
    left: 25
}, width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d[0];
})])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
    return d[1];
})])
    //.range([height, 0]) //flip y
    .range([0, height]);

var chart = d3.select('body')
    .append('svg:svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', 2 * height + margin.top + margin.bottom)
    .attr('class', 'chart');

var main = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main');

var other = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main');

// draw the x axis
var xAxis = d3.svg.axis()
    .scale(x)
    //.orient('bottom')
    .orient('top'); // adjust ticks to new x axis position

other.append('g')
    //.attr('transform', 'translate(0,' + height + ')')
    .attr('transform', 'translate(0,0)') // move x axis up
    .attr('class', 'main axis date')
    .call(xAxis);

drawGraph(main, false);
drawGraph(other, true);

function drawGraph(element, drawLine) {
// draw the y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

element.append('g')
    .attr('transform', 'translate(0,0)')
    .attr('class', 'main axis date')
    .call(yAxis);

var g = element.append("svg:g");

g.selectAll("scatter-dots")
.data(data)
    .enter().append("svg:circle")
    .attr("cx", function (d, i) {  return x(d[0]); }) 
   ...