Embracing the Artwork of Narrative Knowledge Visualization | by Ahmad Albarqawi | Aug, 2023

Knowledge visualization is a strong software to symbolize advanced knowledge to readers. Taking it a step additional; narrative visualization permits us to craft knowledge tales that rework data right into a collection of compelling scenes. This strategy tailors the expertise for the viewers.

Narrative visualization is about crafting scenes that information the viewers by means of the information. It represents knowledge in an modern method making a story by means of it. This story emphasizes the crucial factors to extend interactivity and allows the viewers to narrate to the charts. Every visible aspect must be fastidiously woven collectively right into a significant story. Thus, this knowledge informs the viewers whereas actively resonating with their senses. This passive knowledge encounter permits the viewers to retain necessary data for a time frame.

This text will discover the idea of narrative visualization and its makes use of in knowledge communication. The exoplanet discoveries made by NASA’s Transiting Exoplanet Survey Satellite tv for pc (TESS) mission will function a lens by means of which we are able to look at the narrative visuals. We may even have a look at D3, a strong JavaScript library for creating data-driven paperwork.

Narrative visualization is about making visually interesting charts, and taking your viewers on a journey to find the information. The info is briefly launched at first; it’s profoundly explored within the center and concludes with shedding gentle on the important thing insights or offering versatile exploration instruments, thus forming an interactive story.

It’s a course of that organizes knowledge into a selected construction crafting a visible story as a substitute of randomly presenting information and figures. Subsequently, the information turns into the characters in a narrative, and your job because the narrator is to deliver these characters to life utilizing visuals. The viewers engages with the information story whereas drawing connections and recognizing patterns that may simply be retained in the long term.

There are three important buildings that narrative visualizations can take:

1. Writer-driven narratives: The writer supplies a selected path by means of the information and dictates the story course, main the viewers by means of the information in a structured method. Writer-driven visuals are efficient in clearly speaking insights, comparable to movies.
2. Reader-driven narratives: This strategy offers management to the viewers. It supplies a extra interactive expertise the place the viewers can discover the information at their very own tempo and comply with their path. This may be efficient in encouraging engagement and exploration. An instance of that is interactive dashboards.
3. Hybrid narratives: combines parts of each author-driven and reader-driven narratives. They sometimes begin with an author-driven introduction, adopted by a reader-driven exploration part. This supplies a stability between guided storytelling and interactive exploration. An instance of that is Martini Glass knowledge illustration.

In our upcoming sections, we’ll use the “Martini Glass” construction, a well-liked hybrid narrative, to visualise the information from NASA’s TESS mission. This construction supplies an preliminary author-driven overview (the stem of the glass), adopted by a reader-driven exploration house (the bowl of the glass). Permitting us to information the viewers by means of the important thing factors of the information earlier than letting them discover the information in additional depth.

In 2018, NASA launched into an exploratory journey to find exoplanets past our photo voltaic system by launching the Transiting Exoplanet Survey Satellite tv for pc (TESS) mission.

The TESS mission has proved to be an astronomical treasure. NASA, by means of this mission, has amassed greater than 90 knowledge factors. These factors include precious details about every exoplanet contributing to fixing a cosmic puzzle. This knowledge consists of the exoplanets’ names, their host stars and the invention 12 months, together with their bodily traits: measurement, form, eccentricity, and orbital interval. These datasets encapsulate every exoplanet’s story making the TESS mission’s information and figures unravel compelling cosmic tales.

We are going to use TESS data to create a story visualization that tells the story of exoplanet discoveries by means of the years with the versatile software on the finish for in-depth evaluation.

Scene 1: Overview of Found Exoplanet
The narrative begins with an outline of the exoplanets found by TESS from 2018 to 2023, highlighting the developments over time and evaluating some traits with Earth ranges at excessive ranges. This units the stage for our story, offering context concerning the breadth and scope of the TESS mission. The primary scene breaks down into three particular visualizations designed to showcase a novel overview of the information:

• Histogram of Discoveries per Yr: this showcases the variety of found exoplanets annually. The peak of every bar corresponds to the variety of discoveries. To supply an interactive expertise, clicking on the bar filter the information within the different charts for a centered evaluation of the discoveries made in that specific 12 months.
• Scatter Plot of Equilibrium Temperature vs Orbital Eccentricity: this scatter plot supplies a view of the exoplanets’ traits by evaluating their equilibrium temperature and orbital eccentricity. The equilibrium temperature, illustrated on the x-axis, approximates the common temperature of an exoplanet. The orbital eccentricity, displayed on the y-axis, signifies how a lot the exoplanet’s orbit deviates from an ideal circle. Interactive parts allow customers to discover the information additional: hovering over a circle reveals overview of the information, whereas clicking transitions the person to the second scene for an in depth exploration view.
• Scatter Plot of Stellar Mass vs Radius: shifting the deal with the host stars, this visualization plots stellar mass in opposition to the radius, every represented by a circle. As with the earlier visualization, interactive options enable customers to discover particular planet traits.

Scene 2: In-depth Exploration of Particular person Exoplanets
Subsequent, we dive into the person exoplanets by clicking on them, exploring their distinctive traits, and evaluating these options to ranges discovered on Earth. The values are introduced utilizing a collection of horizontal bars describing a selected parameter and evaluating the exoplanet worth with an approximate corresponding Earth vary.

This scene supplies a better have a look at the properties that make every planet distinctive comparable to equilibrium temperature, planetary radius, orbital semi-major axis, orbital eccentricity, and the host star’s radius and mass.

Scene 3: Interactive Exploration of TESS Knowledge
The ultimate scene supplies an interactive exploration software that permits customers to alter varied comparability ranges and choose which options to check. On this scene we permitting for a customized exploration expertise.

This case research demonstrates the ability of narrative visualization in making advanced knowledge accessible and interesting. Within the subsequent part we’ll discover the implementation particulars.

D3.js is a javascript framework for interactive knowledge visualizations on the internet. Earlier than we begin constructing the TESS narrative visualization, let’s discover some fundamental performance of D3.

Choosing Components:

One in every of D3’s important options is the ‘choose’ methodology. This lets us establish parts in an HTML doc that we have to regulate. For instance:

d3.choose("#visualization")

Appending and Manipulating Components:

D3 can assemble and handle SVG parts utilizing the strategies `append`, `attr`, and `model`.

• `append` introduces new parts (circles, rectangles, and so forth.) into an SVG, every representing totally different knowledge factors.
• The `attr` and `model` regulate the attributes and properties of those parts, like their positions, sizes, and colours.

Binding Knowledge:

Utilizing the `knowledge` methodology, D3 binds knowledge to visible parts. This grounds its power in creating data-driven visuals, permitting dynamic updates.

Scaling:

Scaling maps an enter area to an output vary, adjusting the drawing space on your knowledge. For example, `d3.scaleLinear()` makes use of a linear scaling the place any given quantity within the enter area corresponds on to a quantity within the output vary.

Now that we all know the fundamentals of D3, we are able to construct a fascinating narrative utilizing the TESS mission knowledge (available here). For brevity, the fundamentals of the primary two scenes are mentioned intimately on this article. You’ll be able to try the GitHub Repository for complete scene implementation.

Put together the html

Load the d3 library within the header

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

Then put together a container div to attract the charts:

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

Scene 1: Overview of Found Exoplanets

Right here’s how we create the primary scene:

1. The TESS knowledge is loaded and saved in a variable utilizing the `d3.csv` perform.
2. A scatter plot represents the exoplanets found by TESS over time.
3. Interactivity is added, permitting customers to click on on particular exoplanets and navigate to Scene 2.

Load the information and name the code to attract the primary scene:

d3.csv("knowledge/tess_confirmed_plannets.csv").then(perform(myData) {
knowledge = myData;
// Scene 1: Overview
drawScene1(myData);
});

Let’s draw a pattern from the primary scene by exhibiting the exoplanets in scatter plot, examine line feedback for the implementation particulars:

Scene 2: Detailed Exploration of Particular person Exoplanets

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

1. Create the `drawScene2` perform to make use of knowledge from a specific exoplanet.
2. Create visible parts that showcase the person options of chosen exoplanets and examine them with Earth’s vary.

The given code is a simplified model for Scene 1 and Scene 2. The whole code, with interactive parts and options, will be sourced from the linked GitHub repository.

You’ll be able to examine the ultimate narrative final result under:

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

In conclusion, narrative visualization deviates from the monotonous knowledge communication path and undertakes a journey. The info is introduced in a structural but interesting strategy to seize the viewers’s consideration. These knowledge tales interact the viewers in an individualized method. Nonetheless, the curators of those tales can select their narrative buildings intentionally for environment friendly knowledge storytelling, whether or not author-driven, reader-driven, or hybrid narrative.

NASA’s Transiting Exoplanet Survey Satellite tv for pc mission knowledge was used as a case research to show narrative visualization. This TESS mission found exoplanets past our photo voltaic system with over 90 options. The hybrid Martini Glass strategy is used to speak this knowledge to the audiences. The narrative begins with an author-driven strategy after which transitions to particulars concerning the exoplanets by means of a reader-driven methodology for interactive and customized exploration.

Crafting a visible narrative is an artwork the place being sure about your final purpose and the target market and choosing the construction of your story is essential to the implicit which means of your knowledge and interesting the audiences.

• NASA TESS mission gallery: link
• NASA exoplanet archive: link
• NASA content material coverage: link
• Earth truth sheet: link
• Github repo with the total code: link
• The used knowledge after cleansing: link
• UIUC course “CS 416: Knowledge Visualization”.

Citation: NASA content material (photographs, movies, audio, and so forth) is mostly not copyrighted and could also be used for academic or informational functions without having express permissions.