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.
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:
- 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.
- 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.
- 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.
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.
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.
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 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 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.
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.
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:
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.
Using the `data` method, D3 binds data to visual elements. This grounds its strength in creating data-driven visuals, allowing dynamic updates.
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.
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
Then prepare a container div to draw the charts:
Scene 1: Overview of Discovered Exoplanets
Here’s how we create the first scene:
- The TESS data is loaded and stored in a variable using the `d3.csv` function.
- A scatter plot represents the exoplanets discovered by TESS over time.
- 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:
data = myData;
// Scene 1: Overview
Let’s draw a sample from the first scene by showing the exoplanets in scatter plot, check line comments for the implementation details:
Scene 2: Detailed Exploration of Individual Exoplanets
We’ll create the second scene by following these steps:
- Create the `drawScene2` function to use data from a selected exoplanet.
- Create visual elements that showcase the individual features of selected exoplanets and compare them with Earth’s range.
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:
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.
- 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.