Embracing the Art of Narrative Data Visualization

Data Visualization through NASA’s TESS Mission Exoplanets

example of a narrative visual scene to explore exoplanets features — by author

Data visualization is a powerful tool to represent complex data to readers. Taking it a step further; narrative visualization allows us to craft data stories that transform information into a series of compelling scenes. This approach tailors the experience for the audience.

Narrative visualization is about crafting scenes that guide the audience through the data. It represents data in an innovative way creating a story through it. This story emphasizes the critical points to increase interactivity and enables the audience to relate to the charts. Each visual element should be carefully woven together into a meaningful story. Thus, this data informs the audience while actively resonating with their senses. This passive data encounter allows the audience to retain important information for a period of time.

This article will explore the concept of narrative visualization and its uses in data communication. The exoplanet discoveries made by NASA’s Transiting Exoplanet Survey Satellite (TESS) mission will serve as a lens through which we can examine the narrative visuals. We will also look at D3, a powerful JavaScript library for creating data-driven documents.

Decoding the Fundamentals of Narrative Visualization

Narrative visualization is about making visually appealing charts, and taking your audience on a journey to discover the data. The data is briefly introduced in the beginning; it is profoundly explored in the middle and concludes with shedding light on the key insights or providing flexible exploration tools, thus forming an interactive story.

It is a process that organizes data into a specific structure crafting a visual story instead of randomly presenting facts and figures. Therefore, the data becomes the characters in a story, and your job as the narrator is to bring these characters to life using visuals. The audience engages with the data story while drawing connections and recognizing patterns that can easily be retained in the long run.

There are three main structures that narrative visualizations can take:

1. Author-driven narratives: The author provides a specific path through the data and dictates the story direction, leading the audience through the data in a structured way. Author-driven visuals are effective in clearly communicating insights, such as videos.
2. Reader-driven narratives: This approach gives control to the audience. It provides a more interactive experience where the audience can explore the data at their own pace and follow their path. This can be effective in encouraging engagement and exploration. An example of this is interactive dashboards.
3. Hybrid narratives: combines elements of both author-driven and reader-driven narratives. They typically start with an author-driven introduction, followed by a reader-driven exploration section. This provides a balance between guided storytelling and interactive exploration. An example of this is Martini Glass data representation.

martini glass sketch — by author

In our upcoming sections, we will use the “Martini Glass” structure, a popular hybrid narrative, to visualise the data from NASA’s TESS mission. This structure provides an initial author-driven overview (the stem of the glass), followed by a reader-driven exploration space (the bowl of the glass). Allowing us to guide the audience through the key points of the data before letting them explore the data in more depth.

Case Study: Exoplanet Discovery through NASA’s TESS Mission

concept of TESS mission — by NASA’s Goddard Space Flight Center (the license details in the references)

In 2018, NASA embarked on an exploratory journey to discover exoplanets beyond our solar system by launching the Transiting Exoplanet Survey Satellite (TESS) mission.

The TESS mission has proved to be an astronomical treasure. NASA, through this mission, has amassed more than 90 data points. These points consist of valuable information about each exoplanet contributing to solving a cosmic puzzle. This data includes the exoplanets’ names, their host stars and the discovery year, along with their physical characteristics: size, shape, eccentricity, and orbital period. These datasets encapsulate each exoplanet’s story making the TESS mission’s facts and figures unravel compelling cosmic stories.

sample of the data — the original data includes more than 90 columns

We will use TESS data to create a narrative visualization that tells the story of exoplanet discoveries through the years with the flexible tool at the end for in-depth analysis.

Scene 1: Overview of Discovered Exoplanet
The narrative begins with an overview of the exoplanets discovered by TESS from 2018 to 2023, highlighting the trends over time and comparing some characteristics with Earth ranges at high levels. This sets the stage for our story, providing context about the breadth and scope of the TESS mission. The first scene breaks down into three specific visualizations designed to showcase a unique overview of the data:

• Histogram of Discoveries per Year: this showcases the number of discovered exoplanets each year. The height of each bar corresponds to the number of discoveries. To provide an interactive experience, clicking on the bar filter the data in the other charts for a focused analysis of the discoveries made in that particular year.
• Scatter Plot of Equilibrium Temperature vs Orbital Eccentricity: this scatter plot provides a view of the exoplanets’ characteristics by comparing their equilibrium temperature and orbital eccentricity. The equilibrium temperature, illustrated on the x-axis, approximates the average temperature of an exoplanet. The orbital eccentricity, displayed on the y-axis, indicates how much the exoplanet’s orbit deviates from a perfect circle. Interactive elements enable users to explore the data further: hovering over a circle reveals overview of the data, while clicking transitions the user to the second scene for a detailed exploration view.
• Scatter Plot of Stellar Mass vs Radius: shifting the focus on the host stars, this visualization plots stellar mass against the radius, each represented by a circle. As with the previous visualization, interactive features allow users to explore specific planet characteristics.

scene 1 — exoplanets overview displayed by the year discovery

Scene 2: In-depth Exploration of Individual Exoplanets
Next, we dive into the individual exoplanets by clicking on them, exploring their unique characteristics, and comparing these features to ranges found on Earth. The values are presented using a series of horizontal bars describing a specific parameter and comparing the exoplanet value with an approximate corresponding Earth range.

This scene provides a closer look at the properties that make each planet unique such as equilibrium temperature, planetary radius, orbital semi-major axis, orbital eccentricity, and the host star’s radius and mass.

scene 2 — individual exoplanet characteristics compared with the Earth ranges

Scene 3: Interactive Exploration of TESS Data
The final scene provides an interactive exploration tool that allows users to change various comparison ranges and select which features to compare. In this scene we allowing for a personalized exploration experience.

scene 3 — interactive tool

This case study demonstrates the power of narrative visualization in making complex data accessible and engaging. In the next section we will explore the implementation details.

Using D3 for Narrative Visualization

D3.js is a javascript framework for interactive data visualizations on the web. Before we start building the TESS narrative visualization, let’s explore some basic functionality of D3.

Selecting Elements:

One of D3’s essential features is the ‘select’ method. This lets us identify elements in an HTML document that we need to adjust. As an example:

d3.select("#visualization")

Appending and Manipulating Elements:

D3 can construct and manage SVG elements using the methods `append`, `attr`, and `style`.

• `append` introduces new elements (circles, rectangles, etc.) into an SVG, each representing different data points.
• The `attr` and `style` adjust the attributes and properties of these elements, like their positions, sizes, and colors.

Binding Data:

Using the `data` method, D3 binds data to visual elements. This grounds its strength in creating data-driven visuals, allowing dynamic updates.

Scaling:

Scaling maps an input domain to an output range, adjusting the drawing area for your data. For instance, `d3.scaleLinear()` uses a linear scaling where any given number in the input domain corresponds directly to a number in the output range.

Building the TESS Scenes

Now that we know the basics of D3, we can build an engaging narrative using the TESS mission data (available here). For brevity, the basics of the first two scenes are discussed in detail in this article. You can check out the GitHub Repository for comprehensive scene implementation.

Prepare the html

Load the d3 library in the header

<script src="https://d3js.org/d3.v7.min.js"></script>

Then prepare a container div to draw the charts:

<div id="visualization"></div>

Scene 1: Overview of Discovered Exoplanets

Here’s how we create the first scene:

1. The TESS data is loaded and stored in a variable using the `d3.csv` function.
2. A scatter plot represents the exoplanets discovered by TESS over time.
3. Interactivity is added, allowing users to click on specific exoplanets and navigate to Scene 2.

Load the data and call the code to draw the first scene:

d3.csv("data/tess_confirmed_plannets.csv").then(function(myData) {
 data = myData;

 // Scene 1: Overview
 drawScene1(myData);
});

Let’s draw a sample from the first scene by showing the exoplanets in scatter plot, check line comments for the implementation details:

TESS mission data exploration — scene1 code sample to draw an overview scatter plot

Scene 2: Detailed Exploration of Individual Exoplanets

We’ll create the second scene by following these steps:

1. Create the `drawScene2` function to use data from a selected exoplanet.
2. Create visual elements that showcase the individual features of selected exoplanets and compare them with Earth’s range.

TESS mission data exploration — scene2 code sample to compare individual exoplanet features with earth ranges

The given code is a simplified version for Scene 1 and Scene 2. The complete code, with interactive elements and features, can be sourced from the linked GitHub repository.

You can check the final narrative outcome below:

https://barqawiz.github.io/NASA_TESS_Narrative/

In conclusion, narrative visualization deviates from the monotonous data communication path and undertakes a journey. The data is presented in a structural yet appealing way to capture the audience’s attention. These data stories engage the audience in an individualized manner. However, the curators of these stories can choose their narrative structures deliberately for efficient data storytelling, whether author-driven, reader-driven, or hybrid narrative.

NASA’s Transiting Exoplanet Survey Satellite mission data was used as a case study to demonstrate narrative visualization. This TESS mission discovered exoplanets beyond our solar system with over 90 features. The hybrid Martini Glass approach is used to communicate this data to the audiences. The narrative begins with an author-driven approach and then transitions to details about the exoplanets through a reader-driven method for interactive and personalized exploration.

Crafting a visual narrative is an art where being certain about your ultimate goal and the target audience and selecting the structure of your story is crucial to the implicit meaning of your data and engaging the audiences.

References

• NASA TESS mission gallery: link
• NASA exoplanet archive: link
• NASA content policy: link
• Earth fact sheet: link
• Github repo with the full code: link
• The used data after cleaning: link
• UIUC course “CS 416: Data Visualization”.

Quotation: NASA content (images, videos, audio, etc) is generally not copyrighted and may be used for educational or informational purposes without needing explicit permissions.