This is a guest post by Dr. Stefano Meschiari, a W. J. McDonald Postdoctoral Fellow at the University of Texas at Austin. His research focuses on planet formation, exoplanet detection, and all-around software development for fun and outreach.
Introduction
Outreach has become an essential part of our job as astronomers. A considerable portion of astronomy outreach is carried out online, where it can reach a global audience and get students, teachers and the general public excited about our research. Over the past few years, online outreach efforts have grown into full-fledged and engaging apps. These apps let enthusiasts and amateurs understand, and even participate in, the process of scientific discovery. As an added bonus, web apps generally work on smartphones and tablets with only minor tweaks, further expanding their reach.
Examples of successful citizen science projects abound, most famously the Zooniverse family of web apps (my personal favorite being Planet Hunters). My personal contribution to this movement has been the development of Systemic, an open-source application devoted to the analysis of exoplanetary data. I then worked on converting my scientific code into a web app, Systemic Live; Systemic Live is now used at several universities as a “virtual lab” for students. Most recently, I created a gravity game, Super Planet Crash, a proof-of-concept edutainment app to entice players into learning more about exoplanets and gravity. It has been played more than 9,000,000 times.
Thanks to the recent renaissance of Web technologies, it is now easier than ever for the average astronomer to condense their research and scientific code into small, yet interesting web apps. Various libraries and frameworks can do a lot of the grunt work, papering over some of the idiosyncrasies of web development and accelerating the time it takes to go from idea to finished app. At the same time, much of this technology is still young. In fact, there is arguably a “Cambrian Explosion” of web development tools, with new projects constantly being announced and superseded.
The state of web development tools is not yet at the “Just Add Science” level — some assembly is required. Below, I have collected a list of links to web development tools for the busy astronomer.
The Basic Tools
To create even the most unassuming web application, you will likely need to be reasonably proficient in three languages, which address separate concerns. Roughly, HTML5 defines the structure of each page, CSS defines the appearance of page elements, and JavaScript, which is a full-fledged programming language, is used to control the page content and respond to events. There are copious online resources and tutorials that can help you achieve basic fluency in all three. The Mozilla Developer Network (MDN) and resources therein are great places for getting started.
Once one goes beyond basic mastery, however, things can start to quickly become hairy and slightly arcane due to the long and bloody history of web browsers. To this day, a lot of things are objectively complicated even in modern browsers, such as achieving complex layouts, writing components, smoothing over browser differences, and more. Over the last few years, a few libraries and frameworks have emerged that address a lot of pain points. Bootstrap is a complete framework which helps you quickly define a layout for your app, providing useful components and a clean, professional look; for instance, my AstroTrends web app uses the default look offered by Bootstrap. JQuery takes away a lot of the friction in interacting with the webpage elements from JavaScript. Finally, Underscore.js adds a lot of little niceties that make JavaScript more productive.
Initializr can be used to create the boilerplate to get your project started. You can use the “Bootstrap” configuration and download a .zip archive that will contain a skeleton structure and a few libraries for your project. Other libraries (such as Underscore.js, or the plotting libraries below) can either be downloaded and installed inside the project structure, or linked from your web page using a service that will host the files (e.g. cdnjs).
Editing and Running Your Files
In most cases, your favorite editor will be sufficient to productively work on writing your first web app. If you used Initializr to create your project, you can start editing two files: “index.html”, which contains the HTML structure of your application, and “js/main.js”, a JavaScript file that will be run by the HTML page.
To see the results of your work, you should open your page in your favorite web browser. Chrome (View->Developer), Firefox (Tools->Web Developer) and Safari (activate the Develop menu under Preferences->Advanced) all offer excellent tools to aid web development. The JavaScript Console can be used to check for debugging messages and to run small fragments of JavaScript code.
You can also run JavaScript from the command line to avoid passing through the browser. Node.js is a JavaScript interpreter (and much more); it can be helpful for rapid testing of your JavaScript files.
Plotting
There are several incredible libraries for creating cool visualizations and plots inside a web browser. The most famous may be D3.js, which can create really stunning pages, but has a substantial learning curve. For more mundane plotting needs, I found Highcharts to be a great turn-key library for plotting (especially for simple line/scatter/histogram charts). Their demo page has some helpful example plots.
Animations can offer a more accessible and visual experience than plots to the layperson. For simple animations, Paper.js offers a very simple interface, substantially easier to use than other alternatives. I used Paper.js to animate the orbits in Super Planet Crash.
Running Your Scientific Code on the Browser
If you have developed a substantial amount of scientific code as part of your research, chances are that it is interesting enough that, once simplified, it could make for a cool web application to show off your research and educate the public. Rewriting even a subset of your code in JavaScript can be daunting, however, and may waste time due to the additional testing required.
Thankfully, Emscripten can automate the process. Emscripten converts C or C++ code into highly optimized JavaScript, which can then be integrated as the “computation kernel” of your web application. Fortran code, once digested into C code through F2C, is also a candidate for translation. You can even stack layers and compile the interpreter for your favorite language, so that you could run, say, Python in your web app!
I used Emscripten to convert the Systemic code (part of a regular application) into code that was folded into Systemic Live (a web app). The process can be as easy as adding a new entry in your project’s Makefile.
In this post, I attempted to assemble an opinionated list of links to useful tools that will get you up and running with your first interactive web app. AstroBetter users, are you interested in creating online outreach projects? What tools would you use? What astronomy concept would you like to see explained in a web app?
Hi Danny and Stefano,
One thing that I would really like to see as a js simulation (or simply demo) of how galaxies start from a cloud formation and end up disk-shaped. From what I understand it is because of conservation of angular momentum. Initially the cloud has some angular momentum, and after random collisions between the cloud elements their out-of-the-equatorial-plane momentum tends to cancel, but their velocity in the plane must be kept—hence all the stars end up on a disk.
Is the Oort cloud spherical because the density of matter is small there and makes the collisions unlikely?