JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>


  
        <title>Monkey Map</title>


    <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>
                </li>
                 <li>
                    <input type="checkbox" name="Veruca" onclick="validate()"  id="Veruca">
                    <label for="Veruca">Veruca</label>
                </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" name="Cebus" onclick="validate()"  id="Cebus">
            <label for="Cebus">Cebus capuinus</label>
            <ul>
                <li>
                    <input type="checkbox" name="Ibeth"  onclick="validate()" id="Ibeth">
                    <label for="Ibeth">Ibeth</label>
                </li>
                <li>
                    <input type="checkbox" name="Mimi"  onclick="validate()" id="Mimi">
                    <label for="Mimi">Mimi</label>
                </li>
                <li>
                    <input...

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); 
		console.log(data);
		});	
};
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"...