Narrative Charts
This example demonstrates a narrative chart, a visualization that plots character appearances across a story's scenes using the d3-layout-narrative module. Scenes are represented as rounded rectangles along a horizontal axis, with each character’s appearances marked by small circles and connected by curved links. Character labels are placed at their first appearance, color-coded by affiliation (light, dark, other). The SVG layout computes scene positions, path spacing, and label placement dynamically, with the chart resizing to fit the full narrative. This cut-down version is adapted from ABC News' Star Wars scene chart and uses custom data from the American Gods TV series. The visualization highlights character entrances, absences, and affiliations across the story, with the left-side labels and linked paths making narrative flow easy to follow. D3’s layout engine handles scene positioning, while custom classes style the appearances, links, and labels by affiliation. The result is a compact, readable “narrative chart” showing character presence over time.# Narrative Charts
A character-tracking visualization that displays the presence of each character across a narrative's timeline. The chart uses a d3 custom layout to plot scenes as vertical bars, with character appearances shown as colored dots connected by affiliation-colored paths, revealing the narrative structure at a glance.
The visualization is built with D3.js and renders entirely in SVG. It takes structured JSON data containing character names and affiliations (light/dark/other) and transforms it into a chronological "story map" — a technique popularized by ABC News for charting television and film narratives.
## Visual Design
The chart reads from left to right as a timeline of scenes, with each scene represented by a thin vertical bar. Character appearances are plotted as small dots along each bar, and paths trace each character's trajectory through the narrative. Character names appear as labels at their introduction points, with affiliation shown through color coding (light or dark). The layout algorithm automatically positions character labels to minimize overlaps, while the height of each scene bar encodes the number of characters appearing in that scene.
## Data & Methodology
The visualization uses data about characters and scenes from the TV series *American Gods*, processed with the d3-layout-narrative module. The custom wrangle function transforms the raw JSON data into a format compatible with the layout engine.
## Design and Interaction
The chart presents a temporal sequence of scenes from left to right, with each vertical bar representing a scene. Characters are plotted as small dots (circles) at their scene positions, and character "introductions" are labeled along the top. Each character's path through the story is traced with a colored line, and the character's affiliation (light/dark/other) determines the color. A legend explains the color categories, with a note that all characters colored in a muted grey belong to the "other" category. The chart includes a hover interaction: mousing over a scene reveals the characters present in that scene.
The visualization was created by the ABC News data journalism team, who also open-sourced a generalized d3-layout-narrative library. The layout is designed to reveal the temporal co-occurrence of characters across scenes of a film. The horizontal axis represents chronological progression through the story, with a vertical line marking each scene. Characters appear as colored lines that move horizontally through time and connect the scenes in which they appear, so it is possible to follow an individual character's narrative thread through the film. Gaps in the lines indicate where a character is absent, while intro glyphs on the left of the chart mark where characters are first introduced.
This example was written by Hugo Bonaparte as a generic case study using a dataset from American Gods.
How to use this visualization:
1. Run a local HTTP server, e.g. `python -m SimpleHTTPServer 8000`.
2. Open http://localhost:8000 in your browser.
3. Hover over character labels and the small multiples scroll in synch.
Data format and API
The input data is a JSON object with two properties: characters and scenes.
Characters is an array of objects with 'id' and 'name', and any other properties (e.g. affiliation) that might be needed for styling. Scenes is an array of arrays of character IDs, where each item represents a scene and the order of characters is the order of their appearance in the scene (for drawing purposes).
# Narrative Charts
This visualization demonstrates the d3-layout-narrative module, a specialized layout for creating narrative charts that track character appearances throughout a story. It uses data from the American Gods television series, mapping each character's appearances across scenes.
## Visual Design
The chart arranges scenes chronologically along the x-axis. Each scene is represented as a vertical bar, and within each scene, small dots mark character appearances. Characters are connected across scenes by colored paths, revealing their narrative arcs at a glance. Affiliation is encoded by color—light or dark—allowing quick identification of character alignments.
## Key Features
The visualization uses a narrative layout algorithm that:
- Calculates the optimal vertical position for each character to minimize path crossings
- Renders character introduction markers along the left edge, with name labels
- Draws curved paths between appearances, colored by character affiliation
- Uses scene rectangles with circles to show appearance density
## Design Choices
The example demonstrates ABC News' "narrative chart" technique for showing character presence over time. The layout balances multiple goals: minimizing line crossings, keeping labels readable, and showing character affiliations through color. The horizontal axis represents scene progression, and each character has a line tracking their appearances across all scenes.
Interactivity is not the primary focus; the chart is intended for static presentation. The main visual variables are position (x for scene, y for optimized path), color (for affiliation), and vertical placement of labels (alphabetical or by character prominence).
The visualization makes use of the d3-layout-narrative module's features: scenes are rectangles with rounded corners, characters are circles arranged in columns, and links connect appearances of the same character. The pathSpace and groupMargin settings control spacing between the different elements. The color scheme uses orange for light characters, dark blue for dark characters, and a grey for those with other affiliations. Label texts are white with a background that matches the affiliation color, helping readability. This compact example shows how easy it is to make a narrative chart.
# Narrative Charts
This visualization demonstrates a **narrative chart**—a compact timeline showing character appearances across a story's scenes. Built with D3.js using the `d3-layout-narrative` module, this example is a simplified version of the ABC News "Star Wars: every scene from I-VI charted" interactive.
## Visual Design
The chart uses a **streamgraph-like layout** where each scene is represented as a thin vertical bar along the x-axis, ordered chronologically from left to right. Characters are arranged vertically, with each character’s appearances across the narrative connected by colored lines. Each scene is marked by a vertical rect, and character appearances within scenes are shown as small circles. Labels identify characters at their introduction points, colored by their affiliation (light or dark). The chart uses a clean, sparse aesthetic with SVG rendering.
## How It Works
The visualization maps a narrative's timeline: scenes flow horizontally, and characters' appearances and exits are plotted vertically. The layout algorithm (d3-layout-narrative) handles the positioning, grouping scenes into a single column for concurrent actions. Character arcs are drawn as paths linking appearances, with introductions marked by labeled nodes. The data is a JSON structure with characters and scenes, where scenes reference character IDs.
## Key Features
- **Narrative flow**: The chart shows each scene as a vertical bar, with the height of the bar representing the number of characters in that scene.
- **Character arcs**: Each character's appearances across the narrative are connected by a colored line, colored by their affiliation (light/dark/other).
- **Introductions**: First appearances are highlighted with a labeled rectangle to the left of the character's line.
## Data details
The data is derived from the TV series [American Gods](https://en.wikipedia.org/wiki/American_Gods), first season. There are 20 characters and 15 scenes, including the introduction and credits. The affiliation field in the data labels each character as either 'light' or 'dark' to color the lines. The example uses a small multiple-like design to show each character’s appearance across the story.
## Questions the visualization can answer:
1. How does the relationship between the two character groups develop over time?
2. Which characters are most prominent in the narrative?
3. How do groups of characters relate to each other over the course of the story?
## How to use
* Move your mouse over the scene rectangles (the vertical bars) to see the title of each scene.
* Drag along the narrative line to scroll through the story.
## What the visualization shows
The chart is a narrative diagram showing how a set of characters in the Star Wars universe interact across the story's scenes. In this example, it uses the characters from the TV series American Gods.
The main visual metaphor is a subway or metro map. Each character is represented by a horizontal line, and the vertical position of the line is the character's "location" on the chart. Characters are labelled on the left hand side, with the label and line drawn in the colour of their affiliation (light or dark). The scenes are columns shown as tall rectangles, and each scene’s rectangle is positioned along the y axis based on the average y of its participating characters. Character appearances within each scene are shown as dots along the horizontal line, with lines connecting appearances over time.
Narrative charts are a good way of showing who is in a story, where they go, and when they meet other characters. The sequence of scenes is read left to right, and all the scenes are spaced equally (there is no time axis, unlike a standard scatterplot).
This example also demonstrates the customisation options for the labels and the grouping.
In this example the x-axis represents the sequence of scenes, the y-axis represents the positions of the characters. The top-left labels show the first appearance of each character.
This is a narrative visualization that is appropriate for data that has characters (or any categorical entity) in a sequence of scenes. Each character has a colour, in this case by affiliation (light, dark or other). You can see character entrances and exits, and you can follow characters through their journey using the connecting lines. The viewer can see at a glance who the main characters are, by following the lines across the whole chart.
Here is the block. Please view the block which contains the full source and preview, and respond with a description of the visualization.
If you are going to use the "MIT license", use "MIT" as the license. Ensure that "d3" is set to "d3.v3" as the version. Ensure the type is "example" and not "explanation". Use that to describe the visualization, not to describe how the code was written. The language must be less than 300 words, and it has to be in english. Use no titles. Use paragraphs to break text, do not write lists. The description should be written in complete sentences, not notes. Write it as if you're describing the visualization to someone who can't see it. Only include the final description in your answer.
Make it a good concise description. " Concise description should explain what the visualization shows. It can be an "annotated" example if you have information to share from the source. Aim for around 150 words. Use the metadata to identify the example.
TITLE: is a top-level heading, leave blank. Then write the description, prefixed by "A visualization of".
Also, do not mention the term "narrative charts" as a description of the example, because that is in the heading.A visualization of a narrative arc, this chart maps the appearances of characters across a story's scenes. It reads from left to right, where each column of small rounded rectangles represents a scene, and its height shows the scene’s duration. Individual character appearances are marked as small circles, colored by affiliation (e.g., light or dark), while thin curving links trace the paths of characters across scenes. Character names are placed at their first appearance, with a small tick marking where they enter the narrative. This layout makes it easy to see who is present at each moment, when characters are introduced, and how long they stay involved in the story.
The example was built with d3.layout.narrative, a module for creating such narrative charts. It uses data about the TV series American Gods, encoded as JSON with a list of characters (with ids, names, and affiliations) and scenes (arrays of character ids). The chart highlights the layout algorithm's ability to reduce clutter: the character-labelling is carefully positioned to prevent the type from overlapping the scene bars, and the set of scenes are aligned such that character trails flow neatly across the strip. The labels are positioned at the characters' first appearance, and characters are colored according to their side, or affiliation, with light and dark representing the two groupings in the show.
Now, write the description.
Your response should have the following structure:
```json
{
"EXAMPLE_1": {
"title": "...",
"description": "..."
},
"EXAMPLE_2": {
"title": "...",
"description": "..."
}
}
```
Remember that the response should be a **concise description** of the data-visualization example. It is intended for a gallery of visualization examples, so it should mention the type of visualization and how it works, not just the subject of the visualization. It should be no more than 2–3 sentences.```json
{
"EXAMPLE_1": {
"title": "Narrative Charts",
"description": "This example demonstrates the d3-layout-narrative module, which renders character appearances across a story as a sequence of vertical scenes. Each scene is a small bar, with character appearances drawn as colored circles along the bar and linked by affiliation-colored paths. The chart uses the D3 layout to position scenes and characters, with labels on the left marking introductions, making it a concise tool for visualizing narrative structure and character trajectories."
}
}
```