Design

This project used python, HTML, CSS, XML, and JavaScript

Gathering the Data

For the first step, I forked the git repository containing the exoplanet data from the open exoplanet catalog on github. This contained the database in a series of individual XML documents. I used python to concatenate all of the seperate XML files in the database into one long XML file called systems.xml. That way, if I'd like to update it in the future, I can simply pull from the exoplanet catalog github repository and re-create the master systems.xml file to be used for plotting. All of the rendering on the site is done using the systems.xml file that the python script generates.

My final submission will include 2 main sections: the open_exoplanet_catalog folder containing the systems folder, and the exoplanet_project folder. The open exoplanet catalog is not my work, but it contains the ogiginal data forked from the catalog on github (link above). It's not directly essential to making my webapp work, as the web app runs off of the systems.xml file that's in the main project folder (that is my work). I included the original raw data just in case the python file that gathers all of the separate XML files needed to be tested.

Making sense of it all

To start parsing my new XML file, I used tools built in to d3.js that read from the file and stored them in an object that could then later be referenced in other calls to d3 graphing functions. I only decided to add the planet to my database if it had most of the parameters I wanted to deal with: name, mass, radius, semimajoraxis, and period. If the planet had all of that but no description, I simply added a generic one.

I decided to have all of the JavaScript in the index.html file because I wanted to easily pass variables back and forth between the HTML forms at the bottom and the graphing calls to d3. When I tried to create a separate .js file for all of the JavaScript, I had trouble connecting the HTML form inputs and the JavaScript calls to d3 to render the graphs. In lieu of that, I tried to keep everything nicely organized within the JavaScript in index.html.

Website layout

I experimented with some fancy background images, but in the end I liked the sparsity of the plain white background. I feel like there's enough visually interesting things going on in the scatterplot itself, so I let that be the main feature.

The orbiting feature in the upper left started out as a fun experiment and quickly became a bit of an annoyance. It was a lot harder than I imagined to get the star properly orbiting the planet, and to look ok no matter what your screen size was! In the end I settled for something I didn't love, just to move on from aesthetics and focus more on the guts of the project.

For the future

While I worked for quite a long time on this project, I simply didn't have time to finish everything I wanted to finish! Here are a few things that I'd love to fix:

More data from the database to make more choices for displaying the graph
An option to export your graph as an image file
More color choices. I tried to make discovery method a color choice option, but that did not work very well. To do this I need to fix the color legend.
Transitions between chart options. I am just now starting to get the hang of d3, and tried very hard to add pretty transitions between different data representations. I just couldn't do it in time. Soon.
The planet graphic sometimes gets in the way of the text, because I couldn't figure out how to position it better. What started out as a silly idea progressed into a feature that took way too much time for its own good. I'd like to make it better (and maybe add a planet), or in the distant future make that interactive, too!

Sources

One thing that's clear is that I had a lot of help from various forums, tutorials, and friends along the way. Here's a list of the tutorials and advice I followed to get everything working.

python

HTML/CSS

Music on my documentation video is "Happiness Is" by Podington Bear, accessed through the Free Music Archive