earth.js

The earth.js file pretty much handles everything on the front end.

var REL_DATE; var REL_TIME = 0;

These two variables help handle navigation, as well as to keep a reference of how far the page is from the current date.

function jsonExists(path)

If the page tries to navigate to a resource that has no data, this is a function to help check if that resource exists. Effectively, this should eliminate a 'No Data' error.

function navigate(step)

This function has been mostly reworked. .First it updates the REL_TIME variable and checks if it's the current date or not, then builds a resource, and checks if it exists using the function above. This process is wrapped in a for loop, so if a time is not found in 8 steps it will return to its original configuration.

function navigateTo(date, hour)

New function that implements the Jump To feature available on the UI. Breaks down the date and hour, then builds a resource. If the jsonExists fails, it will return to its original configuration. The way REL_TIME is updated is that upon success, it will subtract the new date from the initial date (since UTC is just a number), convert it to hours, divide by 3 (for the hour interval between steps), and adds it to REL_TIME.

function drawOverlay(field, overlayType)

This function pretty much draws on the canvas of the color bar. It has been updated and and creates the labels as well. The first update had it draw the labels directly on the color bar, but for readability it now draws it in its own canvas in the updated HTML. The first for loop draws the color bar, since the second canvas is the same size it'll crawl the color bar again and for every interval specified in the modulus comparison, it'll draw the text. The if(n - i > 140) continue; Is used to not draw the text partially out of the canvas bounds.

function validityDate(grids) andfunction validityDate(grids) `

These two functions just validate the date, and update the label in the HTML file if the date is valid. All dates are in UTC now, so the local date functionality isn't currently needed.

init()

Most of the UI changes happen in here. d3.select("body").on("keydown", function() { ... This adds key bindings to navigate between times without actually needed to click.

d3.select("#jgo").on("click", function () {... Selects the jgo HTML object, which is the Go button on the page. On click, it will grab the date and hour value that is entered, and pass it to the navigateTo function mentioned above.

d3.select('#sbox').on('change', function() {... d3.select('#obox').on('change', function() {... d3.select('#pbox').on('change', function() {...

When the selection boxes for the surface, overlay, and projection are changed, these update them accordingly. The actual value attribute of the HTML object is grabbed. These values are named a certain way, and if new ones are added, they should be named accordingly to maintain functionality, with the exception of the off overlay value.

d3.select("#nav-backward-more").on("click", navigate.bind(null, -8)); The jumps have also been updated as well. Instead of just passing in a large arbitrary value to determine if it's a date, the step has been updated to actually jump 8 steps, which is a day.

d3.select("#nav-now").on("click", function() { The now selection now updates REL_TIME and REL_DATE accordingly.