Interactive Visual Interfaces

Project 1: Out of This World

This project is an interactive visualization application to help a general audience explore the thousands exoplanets discovered by the Kepler Space Telescope and other astronomical research facilities around the world in the past few decades.

Motivation for Visualization: Data provides planets and their surrounding stars - this allows us to visualize how the planets are connected and common trends (similarities and differences) between different exoplanets.

Github: https://github.com/keerthi-sekar/CS5124-Visual-Interfaces/tree/main/Project%201

Demo Notes

This video shows the functionality of the visualization components. It walks through the interactive features of each chart then the exoplanet browser, and then finally I linked the data source.

To not compromise on readability, my page has a little scroll so the data and text can be seen reasonably.

Data

Source: https://exoplanetarchive.ipac.caltech.edu/cgi-bin/TblView/nph-tblView?app=ExoTbls&config=PS

The data attributes (properties of the exoplanets) we are considering are:

pl_name: Planet Name

hostname: Host Name

sys_name: Usually Hostname except multi-star systems with planets orbiting different stars

sy_snum: Number of Stars

sy_pnum: Number of Planets

discoverymethod: Discovery Method

disc_year: Discovery Year

pl_orbper: Orbital Period [days]

pl_orbsmax: Orbit Semi-Major Axis [au])

pl_rade: Planet Radius [Earth Radius]

pl_bmasse: Planet Mass or Mass*sin(i) [Earth Mass]

pl_orbeccen: Eccentricity

st_spectype: Spectral Type

st_rad: Stellar Radius [Solar Radius]

st_mass: Stellar Mass [Solar mass]

sy_dist: Distance [pc]

The spectral stars represented in the data are visually seen like the image in the left.

Spectral Type is star type which has additional data seen in the image the compliments the data in the sourced dataset.

Visualization Components

Data is visualized in cards set up in a grid. View the demo for the GUI layout.

Barchart

The bar charts mainly show the relationship between attributes of exoplanets with the count of exoplanets.

Vertical bars chosen to help show scale/proportion in relation to the categories on the x-axis.

Histogram

This histogram shows the distribution of planets based on it's distance to the Earth - with approximately 20 bins.

Linechart

The line chart showcases the number of exoplanets discovered over the years of the dataset

Table

This table highlights when a row is hovered and provides data on aspects that aren't visualized on the charts.

Scatterplot

The scatterplot shows the relationship between radius and mass of the exoplanets in the dataset.

Barchart Tooltip

Each Bar chart has tooltip based on the attribute being compared to exoplanet count.

Scatterplot Tooltip

Like the barchart tooltip but has based on the specific exoplanet.

Exoplanet System Browser

The table is similar to the table on the main page. When clicking "More" it updates the browser to the right. Since I was having difficulties with linking this, I used 3 buttons to simulate the concept with data from the table.

Image seen at the top of the documentation page is linked below the table for linking the exoplanet spectral type with the categories.

Findings

Majority (~80%) of exoplanets radius is between 10-12 [Earth Distance] and Mass < 2000 [Earth Mass]
Least count of exoplanets have A star types and most is G
Ratio between unhabitable vs habitable is 409:26
Popular Delivery Methods: Radial Velocity, Transit

Process

Libraries Used: D3 (javascript)

I am a beginner, first-timer, in D3 so I had a few issues with the B and A goals. My focus was the quality of C-goals and interactions.

Structure: Each class is a chart type and then the respective charts on the main page are objects instantiated with the respective attributes of data.

Below are snippets of attempts that weren't added since I couldn't complete them due to time. Other attempts that weren't seen: zooming into different aspects of the scatterplot, linking the barcharts with the line chart, and clicking the row to get updates on the scatterplot.

Line Chart Tool Tip - Tracking data over the line visualized

Line Chart Filter/Rescale by Year - The scale of the linechart reduces to start -> last year selected (ie: 2012-2013)

Sort Barchart - reverse and normal via button trigger

Page updated

Google Sites

Report abuse