In my main.js, I initialized five barcharts using the BarChart class and calculated the necessary counts for the data in separate functions. I then passed each data array of counts to its respective barchart. I also created histogram.js and the Histogram class, very similar to the BarChart class but processes the count array differently. Additionally, I created a line.js file that creates a line chart using discovery year data featuring tooltips using D3's bisector. I initialized it in my main.js and calculated the discovery year count before passing it to the line chart. I did the same thing with my scatterplot.js, adding the planet radius and mass of all known exoplanets into an array and passing it to the scatterplot. The scatterplot even skips exoplanets with an unknown radius and/or mass. Finally, I created a table based on the exoplanet data after loading all of the d3 elements.

Each d3 element I listed above (barchart, histogram, line chart, scatterplot) has a callback function used to filter the data. In each class, I have a mouse click event listener that listens for when a user clicks on a bar in the barchart, in the trackableArea in the timeline, or if they used the brush on the scatterplot. When this event listener is triggered, it calls the callback function which updates the data using the event parameter and updates the rest of the visualizations.

To reset the data,  I implemented a reset filter button at the top left of the page that reloads the default data for every visualization element. I also implemented a loading message that pops up by conditionally rendering a paragraph element at the start and end of my resetFilter and filterData functions.

Lastly, this web app also features a host system viewer showing a scale model of an exoplanet's solar system. The system viewer is created using the System class constructed in system.js, and uses data passed by the setExoplanet function called by the table and scatterplot. If a user selects an individual exoplanet in either of these visualizations, setExoplanet will filter all other exoplanets orbiting the same star and pass it to the system viewer. When the setExoplanet function is called, the system viewer window opens by switching the "display" style from "none" to "flex" and blurs the rest of the screen until the system viewer is closed.

I also ensure missing data is handled appropriately throughout the application. Most of the time, I simply had to check if a certain column is undefined or not and conditionally render certain text. For example, in the above code snippet from my system viewer, I check if st_rad is defined. If not, I assume stellar data is not available and render it on the screen. I also used multiple ternary operators throughout the web app, for example: 

I also added logic to handle planets with blank pl_orbsmax or pl_rade values in the System Viewer. If pl_orbsmax or pl_rade was blank, I moved the planet to the bottom left of the System Viewer window with a tooltip explaining the orbital axis and/or planet radius is unknown. Similarly, I notify the user if stellar data is unavailable.

After finishing all of the data visualizations, I used simple HTML and CSS styling to add a container to each of the visualizations. I rounded the corners, added a box shadow and background color, and applied it to each visualization. 

If you found this project interesting, be sure to check out the Exoplanet Archive Search created for my senior design project.