A Note on NASA's JavaScript Solar Eclipse Explorer


A few weeks ago I came across an application that was built by by Fred Espenak and Chris O'Byrne of NASA: NASA JavaScript Solar Eclipse Explorer. In this blog post I demonstrate how the developers used pure JavaScript to compute the local circumstances for every solar eclipse visible from a specified city for any century from 1500 BCE to 3000 CE.

I found the source code extraced by Jason Davies. It is a perfect example of how powerful JavaScript can be.

Structure

Below is a snippet of the code that was written for the "calculatefor" function:

function calculatefor(el) {
  readform()
  clearoldresults();
  results = document.getElementById("el_results");
  p = document.createElement("p");
  p.setAttribute("id","el_locationtable");
  b = document.createElement("h2");
  b.appendChild(document.createTextNode("Solar Eclipses visible from  "+document.eclipseform.loc_name.value));
  p.appendChild(b);
  resultsTable = document.createElement("table");
  resultsTable.setAttribute("border","0");
  tbody = document.createElement("tbody");
  row = document.createElement("tr");
  td = document.createElement("td");
  td.setAttribute("align","right");
  td.setAttribute("nowrap","");
  row.appendChild(td);
  td = document.createElement("td");
  //
  ...
  //  
  resultsTable = document.createElement("table");
  resultsTable.setAttribute("id","el_resultstable");
  resultsTable.setAttribute("width","150");
  resultsTable.setAttribute("border","2");
  tbody = document.createElement("tbody");
  row = document.createElement("tr");
  td = document.createElement("th");
  td.appendChild(document.createTextNode("Calendar Date"));
  row.appendChild(td);
  td = document.createElement("th");
  td.appendChild(document.createTextNode("Eclipse Type"));
  row.appendChild(td);

Notice that the programmer has built the entire DOM inside the function itself; later, the results are appended to the created DOM elements. By doing so the application contains many lines of unnecessary code that could have been easly avoided had the programmer built a simple HTML DOM structure and then appended the calculated results to the DOM itself.

Database

The application uses a set of arrays to store data, which is not as efficient as employing a database. Having a relational database like SQL or a non-relational database like MongoDB, would have been a better alternative.

Here is a snippet of one of the arrays that was used as a source of data:

function LEm1299() {
calculatefor(new Array(
" -1299 to  -1200",
//-1299  4 29
1246716.691749,   5.0, 30966.7, " 2.591", " 1.605", 1,
-5.32992,  0.97567,  0.26585,
-3.19074, -2.21546, -1.21001, -0.39802,  0.41361,  1.41886,  2.39637,
203.9365259,   0.56509,  5.100e-05,
-10.2929098,  -0.16369,  5.600e-04,
//-1299 10 23
1246894.431728,  22.0, 30957.1, " 2.688", " 1.608",  1,
-0.65275,  0.91986,  0.25064,
-2.69603, -1.54762, -0.47419,  0.36147,  1.19741,  2.27102,  3.41735,
17.5085291,   0.49677,  3.290e-04,
7.4801201,   0.15422, -2.300e-04, 
..........
));}

The file contains over 1500 lines of similar code. Having a separate database would definitely have increased the application's efficiency. Another solution would be to parse the data from an available NASA API or create a RESTful API from which to parse.

In the future, I would like to work on improving the application, especially the user interface.