JSFiddle - React, Tailwind, and code Playground

by KarlCastleton

HTML

<html class="no-js">
<head>
    <meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script 
        src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js"
        type="text/javascript"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"  type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"  type="text/javascript"></script>
</head>
<body>
<!--<div class='form'>-->
  <div >
    <!--<canvas id="canvasOne" class='earth' onClick='grabCoords();'>-->
    <canvas id="canvasOne" class='earth' >Your browser does not support HTML5 Canvas.</canvas>
  </div>
  <div >
    <label for="lat">Your Latitude</label>
    <input type="text" class="form-control" id="lat" value="39.093900">
  </div>
  <div >
    <label for="long">Your Longitude</label>
    <input type="text" class="form-control" id="lon" value="-108.566511">
  </div>
  <div >
    There is significant data pulled from the server to make it possible to explore albedo.  If you get a chart that has 0 values at the end you should probably wait a bit and click Update Chart again.
  <a href="http://www.karlcastleton.net/MathScience/wp-content/uploads/2018/10/mapJune.gif">Animation of June Data</a><br/>
<a href="http://www.karlcastleton.net/MathScience/wp-content/uploads/2018/10/mapDecember.gif">Animation of December Data</a><br/>
Press the update chart to see the changed in albedo for your location.
  <button type="button" class="btn btn-primary" onClick='setPosition()'>Update Chart</button>
  </div>
  <div title="When sunlight reaches the Earth's surface, some of it is absorbed and some is reflected. The relative amount (ratio) of light that a surface reflects compared to the total...

CSS

.noShow {
	display:none;
	visibility:hidden;
}

.earth {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 61%;
	height: 61%;
}

JavaScript

function makeURL(id) {
	//return `http://neo.sci.gsfc.nasa.gov/servlet/RenderData?si=${id}&cs=rgb&format=PNG&width=3600&height=1800`;
	return `http://www.karlcastleton.net/MathScience/wp-content/uploads/2018/10/${id}`;
}

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

var locations=[
[2000,6,1510722],
[2000,12,1510785],
[2001,6,1510744],
[2001,12,1510728],
[2002,6,1510738],
[2002,12,1510726],
[2003,6,1510690],
[2003,12,1510751],
[2004,6,1510781],
[2004,12,1510671],
[2005,6,1510692],
[2005,12,1510679],
[2006,6,1510718],
[2006,12,1510739],
[2007,6,1510694],
[2007,12,1510768],
[2008,6,1510772],
[2008,12,1510687],
[2009,6,1510762],
[2009,12,1510764],
[2010,6,1510672],
[2010,12,1520389],
[2011,6,1529851],
[2011,12,1538391],
[2012,6,1548800],
[2012,12,1555651],
[2013,6,1568981],
[2013,12,1579597],
[2014,6,1585266],
[2014,12,1611234],
[2015,6,1690091],
[2015,12,1699301],
[2016,6,1706025],
[2016,12,1712729] ];

for (i=0;i<locations.length;i++){
  element=locations[i];
  var elem = document.createElement("img");
  elem.setAttribute("src", makeURL(`mapgs${element[0]}_${element[1]}.png`));
  elem.setAttribute("width", "3600");
  elem.setAttribute("height", "1800");
  elem.setAttribute("class","noShow");
  elem.setAttribute("id",`raw${element[0]}_${element[1]}`);
  elem.setAttribute("title", `Year ${element[0]} Month ${element[1]}`);
  document.getElementById("images").appendChild(elem);
//  console.log(`wget "${makeURL(element[2])}"`);
//  console.log(`mv "${makeURL(element[2])}" map${element[0]}_${element[1]}.png`);
}

var dates=new...