JSFiddle - React, Tailwind, and code Playground

CSS

path {
	stroke: black;
	fill: none;
}
body {
        font: 12px Arial;
    }

    .line {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .brush .extent {
        stroke: #fff;
        fill-opacity: .125;
        shape-rendering: crispEdges;
    }

JavaScript

var data = [
   {
    Day : 'Sunday',
    Time : '0.00',
    Bluetooth : '1',
    Date : '03\/06\/2015',
    Epoch : '1440808200'
},
{
    Day : 'Sunday',
    Time : '0.25',
    Bluetooth : '5',
    Date : '06\/06\/2015',
    Epoch : '1440809100'
},
{
    Day : 'Sunday',
    Time : '0.50',
    Bluetooth : 3,
    Date : '13\/06\/2015',
    Epoch : '1440810000'
},
{
    Day : 'Sunday',
    Time : '0.75',
    Bluetooth : '2',
    Date : '20\/06\/2015',
    Epoch : '1440810900'
},
{
    Day : 'Sunday',
    Time : '1.00',
    Bluetooth : '3.5',
    Date : '23\/06\/2015',
    Epoch : '1440811800'
},
{
    Day : 'Sunday',
    Time : '1.25',
    Bluetooth : '4.3',
    Date : '18\/06\/2015',
    Epoch: 1440812700
},
{
    Day : 'Sunday',
    Time : '1.50',
    Bluetooth : '3',
    Date : '10\/06\/2015',
    Epoch : '1440813600'
}];





// Set the dimensions of the canvas / graph
var margin = {top: 10, right: 10, bottom: 100, left: 40},           //main margins
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},			// lower margins
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,						//main height
    height2 = 500 - margin2.top - margin2.bottom;					//lower height

// Parse the date / time
var parseTime = d3.time.format("%H.%M").parse;
var parseDate = d3.time.format("%d/%m/%Y").parse;

var x = d3.time.scale().range([0, width]),							//x scale for main part
    x2 = d3.time.scale().range([0, width]),							//x scale for lower part
    y = d3.scale.linear().range([height, 0]),						//y scale for main part
    y2 = d3.scale.linear().range([height2, 0]);						// y scale for lower part

// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom"),				//x axis for main
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),				//x axis for lower
    yAxis = d3.svg.axis().scale(y).orient("left");					//y axis for both

var brush = d3.svg.brush()
    .x(x2)															//brush is for lower x scale
    .on("brush",...