Anna Chambers Portfolio
Description and Motivation:
The objective of this project was to create an interactive data visualization application allowing users to discover, analyze, and learn more about exoplanets. The recent discovery of thousands of exoplanets has made it difficult for individuals to identify patterns or make observations without a data visualization tool to assist them. This is the motivation behind this project, to take the large dataset of exoplanets and create visualizations that allow the user to answer questions like: has the rate of discovery increased over time, how many exoplanets of specific types exist, and how far away are they from Earth.
​
To achieve this goal I created eight visualizations that each explore a different characteristic of exoplanets such as star type, number of planets in the system, discovery method, and more. Each of these visualizations can be customized with a set of filters that can help to narrow down important findings. Additionally, I developed an exoplanet browser system that provides more in-depth information about each exoplanet system, as well as a table that displays essential details about individual exoplanets.
Video Demo:
Data:
Before diving into the implementation specifics of this project we must first cover the data used to create the visualizations. The data used for this project is from the public NASA Exoplanet Archive. This dataset includes various properties of exoplanets such as their name, discovery method, and physical characteristics such as radius, mass, and orbital parameters all of which were used to create the different visualizations that we will discuss later. The data used for this project was taken from this archive and preprocessed into an excel file by the professor. I then added more preprocessing by changing the excel data file into a CSV file that was ultimately used for implementation.
​
The data includes missing values in some of the columns, most notably in the st_spectype column that was used to determine star type. Instead of ignoring this data, I created an "unknown" subsection of the data so that it could all be visualized in the application.
Sketches:
I used sketching to plan out my Exoplanet Brower System. I was not able to complete all of the feature I initially wanted but the pictures show the original intent and how I got the the design I ended up with.
Visualization Components:
In this section, I will show screenshots from the application and explain each view of the data, and each data visualization. I will also go over how to interact with your application, and how the views update in response to interactions.
Main View
Above is the main view of the application. You can see each of the eight data visualizations and the table which shows all of the exoplanets. Each of the visualizations focuses on one main characteristic of the data.
-
Stars in System: Shows the number of exoplanets that have x amount of stars in their system using a bar chart visualization.
-
Star Type: Shows the number of exoplanets that have each star type as their host star (unknown for missing data) using a bar chart. At the bottom of this visualization, there is a link for users to learn more about the star types. Each star type bar is a different color and this chart is used as the key for the scatterplot.
-
Mass vs Radius: Scatterplot that shows the size of each exoplanet by displaying the Earth Radius of the exoplanet on the x-axis and the Earth Mass of the exoplanet on the y-axis. This visualization also compares the exoplanets to the planets in our solar system (colored black).
-
Planets in System: Bar chart that shows the number of exoplanets that have x planets in their system.
-
Habitable Zone: This shows how many exoplanets are within the habitable zone and how many are outside of the habitable zone. The habitable zone is dependent on star type so the unknown bar is for exoplanets with unknown star type. This was included so as to not confuse users with a large number of missing exoplanets.
-
Distance from Earth: This visualization is a histogram that shows the distribution of exoplanets by their distance from Earth.
-
Discoveries over Time: A line graph that shows the number of exoplanets that were discovered each year. Helpful for analyzing trends over time.
-
Discovery Method: Bar chart that shows how many exoplanets were discovered with each discovery method. Also, includes a link at the bottom that shows more information on discovery methods.
Filtered View
Each of the bar charts in the main view can be used to filter all of the visualizations by clicking on a bar. This functionality directly relates to the goal of learning and discovering trends in exoplanets. The user can select multiple bars and the selections will combine together using "or" logic (meaning that the above screenshot shows trends for exoplanets that either have 2 stars in their system or star type G). Each individual filter can be removed by clicking on the bar or all of the filters can be removed by clicking the "Undo Selections" button in the top left corner. The table is also filtered by the selections. As seen in the above screenshot the axis values for each of the visualizations also update to fit the filtered data. When a new filter is applied the transition for each graph is animated (shown in the demo video above).
Exoplanet Browser View
The second view in the application is the exoplanet browser view. This view can be accessed by clicking on an exoplanet either from the table or the scatter plot. This view shows more information about the exoplanet and the system that it is in. The first two things shown on this page are the exoplanet name and the planet type (calculated using the mass of the exoplanet). The next thing shown on this page is a bubble chart that shows each of the planets in the system and their distance from the star. The mass of the planets is also shown in their size (mass can also be seen in the tooltips which will be discussed later). The bubble chart also uses color to show the type of each planet and a key is included below the chart. The user can click on the "Show Star" checkbox at the top of the bubble chart and the star will be added to the chart and the scale is adjusted to show the star size compared to the planet sizes. Lastly, this view shows the orbits of each of the planets and the host star type with a color key. The user can click on the "home" button in the top left to return to the main view.
Tooltips
Each of the visualizations utilize tooltips to allow the user to learn more information about the data and discover certain functionalities of the application. When you scroll over any of the bars or points in the scatter plot they are highlighted yellow and show additional details relevant to the specific visualization. When you scroll over the line graph blue circle and the exact number of exoplanets are shown for the year you are at. When the user does not have any filters applied the "Undo Selections" button is disabled and has a tooltip that helps the user discover the functionality of filtering. In the exoplanet browser view, the exoplanets have tooltips that show the mass and radius this shows the scale being used for the bubble sizes. Also in the exoplanet browser view, when the Steller Radius of the star is unknown then the "Show Star" checkbox is disabled and a tooltip is added that tells the users that it is unknown.
Discovery and Findings:
This application enables the user to find many new discoveries. The user can gain insights just by looking at the main view. For example, it is clear to see that there were major spikes in discovery in 2014 and in 2016, and the majority of exoplanets that we have discovered come from systems with one planet and one star.
​
The user can gain even more detailed observations by applying filters to the application. For example, by filtering for exoplanets in the habitable zone, the user can discover that the discovered habitable planets are all much closer to Earth than the range of the overall data. Another insight gained is when filtering for the microlensing discovery method, the user can learn that the exoplanets discovered with microlensing are the furthest away from earth, have mainly unknown star types, and have had increasing discovery numbers in recent years. Screenshots of these findings are shown below.
Process:
Libraries
This project was developed using JavaScript, HTML, CSS, and the d3 library to help create the visualizations. I wanted to try to stick to mainly using the d3 library in order to learn its workings more fully. However, in addition to d3, I also used a color-legend library and a runtime library to help make the color legends in the exoplanent browser view.
Code Structure
The code for this application is separated into three main parts: HTML, CSS, and JavaScript files. The HTML file creates the basic structure and layout of the webpage and defines where the visualizations will be placed using svg tags. The CSS file defines the style of the application by indicating the colors and positioning of HTML class values. The JavaScript files contain the main bulk of the logic and create the visualizations. The JavaScript code is organized into classes for each type of chart with one main JavaScript file that initiates, calls, and updates the class objects. The main JavaScript file also loads and processes the data and handles filtering.
Access and Run Code
-
Clone the repo or download and unzip
-
In a terminal cd into the downloaded/cloned directory
-
In the same terminal: run `python -m http.server 8000` (for Python 3)
-
Python 2: run `python -m SimpleHTTPServer 8000`
-
Must download Python if not already installed
-
-
Navigate to http://localhost:8000 in a browser