JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<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, 'blahh'],
	[3,3, 'blahh 2'],
	[4,4, 'hmm'],
    [5, 4, '444'],
    [5.5, 5, '5555'],
    [6, 6, '6666'],
    [6, 7, '7777'],
    [7,8, '3456346'],
    [7,9, '2PHA WAS HERE'],
    [8,10, 'rabbits like carrots'],
    [8,11, 'dkfsldn']
	
];

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 =...