JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Monkey Map</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
		<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
        <script src='https://api.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.js'></script>
        <script src="proj4.js"></script>
        <script src="jquery-3.1.0.slim.min.js"></script>
        <script type="text/javascript" src="canvasjs.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="monkeytimechart.js"></script> 
        <script type="text/javascript" src="canvasjs.min.js"></script>
		<link href='https://api.mapbox.com/mapbox-gl-js/v0.19.1/mapbox-gl.css' rel='stylesheet' />
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
		<link rel="stylesheet" href="monkeymap.css"/>

    </head>
    <body>
            <div>
                <h3>MonkeyMaps!</h3>
            </div>

			<div id="chartContainer" style="height: 300px; width: 75%; float:right;"> </div>
		<div id="formChecker" style="width: 25%; float:right;">
    <ul>
    		<input type="checkbox" name="All" onclick="validate()" id="All">
            <label for="All">All Monkeys</label>
        <li>
            <input type="checkbox" name="Ateles" onclick="validate()" id="Ateles">
            <label for="Ateles">Ateles geoffroyi</label>
            <ul>
                <li>
                    <input type="checkbox" name="Chibi" onclick="validate()"  id="Chibi">
                    <label for="Chibi">Chibi</label>
                </li>
                <li>
                    <input type="checkbox" name="Greg" onclick="validate()"  id="Greg">
                    <label for="Greg">Greg</label>
                </li>
                <li>
                    <input type="checkbox" name="Kyle" onclick="validate()"  id="Kyle">
                    <label for="Kyle">Kyle</label>
              ...

CSS

#map {
	width: 800px;
	height: 500px;
}

.info {
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.info h4 {
	margin: 0 0 5px;
	color: #777;
}

.legend {
	text-align: left;
	line-height: 18px;
	color: #555;
}

.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
}
#days{
 height:500px;   
}

JavaScript

var utm = "+proj=utm +zone=17";
var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";

var data = [];


var Abby = function() {
	var dataPoints = [];
	var dataSeries = { type: "line", showInLegend: true, legendText:"Abby" };
	d3.csv('Abby.csv',function(results){
		results.forEach(function(d){d.time=parseFloat(d.Day)+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
		results.forEach(function (d){dataPoints.push({
		      x: d.time,
		      y: parseFloat(d.Height)                
		    });
		});
		dataSeries.dataPoints = dataPoints;
		data.push(dataSeries); 
		
		});	
};
var Atlas=function() {var  dataPoints=[];var dataSeries = { type: "line", showInLegend: true, legendText:"Atlas" };d3.csv('Atlas.csv',
function(results){results.forEach(function(d){d.time=parseFloat(d.Day)
+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
results.forEach(function 
(d){dataPoints.push({x:d.time,y:parseFloat(d.Height)});});
dataSeries.dataPoints=dataPoints;
data.push(dataSeries);
});}; 
var BenBob=function() {var  dataPoints=[];
var dataSeries = { type: "line", showInLegend: true, legendText:"BenBob" };d3.csv('BenBob.csv',
function(results){results.forEach(function(d){d.time=parseFloat(d.Day)
+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
results.forEach(function 
(d){dataPoints.push({x:d.time,y:parseFloat(d.Height)});});
dataSeries.dataPoints=dataPoints;
data.push(dataSeries);
});}; 
var Chibi=function() {var  dataPoints=[];

var dataSeries = { type: "line", showInLegend: true, legendText:"Chibi" };d3.csv('Chibi.csv',
function(results){results.forEach(function(d){d.time=parseFloat(d.Day)
+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
results.forEach(function 
(d){dataPoints.push({x:d.time,y:parseFloat(d.Height)});});
dataSeries.dataPoints=dataPoints;
data.push(dataSeries);
});}; var Chloe=function() {var  dataPoints=[];
 
var dataSeries = { type: "line", showInLegend: true, legendText:"Chloe"...