characters-2140

100%

characters-2140

✓ Published0🌍 Public

Last edited Mar 22, 2017

Created on Mar 21, 2017

A reader traverses a novel's timeline, seeing character appearances as white bars along the z-axis and yellow line segments connecting mentions between narrator and subject. The scene uses Three.js with a perspective camera that animates forward through the document, while d3's scaleOrdinal maps character names to angles around a cylinder and scaleLinear maps text indices to depth. Character positions and links come from parsed chapter JSON, rendered as WebGL line segments.

AI-generated description

ISC Licensed

Similar vizzes

Loading thumbnail…

Gist 752e79ef7b1d634b16a9e7020da164ff

This visualization presents a narrative chart that maps character appearances and introductions across scenes in a story. Using D3.js’s narrative layout, it positions scenes horizontally and characters vertically, encoding each character’s presence as small black ellipses within scene clusters. The code employs mxGraph to render the final graph, with curved edges connecting characters across scenes. Appearance vertices are placed at precise scene coordinates, while introduction labels sit beside the timeline, with links drawn between these points. The underlying data wrangling occurs in a dedicated function that groups scene characters by ID, and the graph is exported as XML via mxCodec.

HHugoberry

71% match

Loading thumbnail…

Narrative Charts

This example demonstrates a narrative chart built with the d3-layout-narrative plugin, visualizing the structure of a story by charting character appearances across scenes. It reads JSON data containing characters and scene descriptions, then renders an SVG with scenes as vertical bars, character introductions as labeled markers, and appearance nodes colored by affiliation (light/dark). The chart includes interactive tooltips that display scene descriptions on hover and highlight all characters appearing in a given scene, plus per-character highlighting when mousing over labels or links. The layout positions character labels along the left side with paths connecting their introductions and appearances, and the SVG resizes based on the computed layout extent.

BBrunoDumas

67% match

Loading thumbnail…

Gist 9423b215bf16f484a18146a11dcb7d2b

This visualization uses d3.layout.narrative to compute a narrative chart layout from scene-based character co-occurrence data, then renders the result as an interactive mxGraph diagram. It shows character appearances as small circles grouped into rectangular scene clusters, with curved edges linking appearances of the same character across scenes and introduction labels placed to the left. The underlying data wrangling preprocesses raw scene and character JSON into a format for the narrative layout, while mxGraph handles the final drawing. The code also enables curved, arrowless edges and disables user interaction with the graph.

HHugoberry

65% match

Loading thumbnail…

Relations

The visualization shows a character-relationship diagram for a tabletop role-playing game, distinguishing player characters (PJ) from non-player characters (PNJ) across roles like druid, sorcerer, and noble. It uses D3 v4 to render an SVG circle layout, with an outer radius for node placement and an inner radius reserved for potential link connections. The data is loaded from an embedded CSV array listing each character’s name, class, and affiliation. The code sets up the SVG canvas and computes radial dimensions, but does not yet implement the simulation or drawing logic.

55C5

64% match

Loading thumbnail…

scrollytest3

This example demonstrates a scrolling narrative visualization built with D3.js, where user scroll progress drives animated transitions in an SVG/WebGL-rendered scene. The chart uses the `graph-scroll` library to bind scroll events to step-wise updates, likely revealing or transitioning between data states as the reader moves through the page. The visualization is generated from a Blockbuilder.org template and is part of a series of scrolling prototypes (scrollytest1/2), indicating iterative exploration of scroll-driven storytelling. Rendered with SVG and WebGL, it combines D3 v4 with jetpack utilities for concise coding. The MIT-licensed example shows how scrolling can act as an interactive narrative mechanism to sequence changes in the visualization.

335degrees

64% match

Loading thumbnail…

scrollytest3

This scrolling visualization demonstrates a step-through narrative experience where sections of text are fixed to the left while a graph animates on the right, guided by the user's scroll position. Built with D3 v4 and the d3-dsv module for data parsing, it uses the graph-scroll library to trigger animated transitions between steps as the reader scrolls. The SVG rendering includes smooth, state-driven updates, likely showing a dataset that changes or highlights different aspects with each section. The design focuses on storytelling with data, letting the scroll control the flow of the visualization.

335degrees

64% match

Loading thumbnail…

Untitled

This example visualizes a force-directed graph using Chart.js with a custom controller, rendering nodes and edges on a canvas. The graph displays character relationships from *Les Misérables* (the classic `tree.json` dataset), with steel-blue circular nodes labeled by character name and connected by weighted links. Users can switch between dendrogram, tree, and radial layouts via dropdown menus, while the Chart.js zoom plugin enables panning and zooming with mouse wheel or pinch gestures. The code integrates Chart.js 3.9.1, ChartDataLabels for annotations, and Hammer.js for touch support.

SSEDKI91

64% match

Loading thumbnail…

Arc

This visualization displays the character network from Les Misérables as nodes arranged along a horizontal line, with curved arcs connecting interacting characters. Node color distinguishes character groups, while link thickness and color encode interaction strength using a sequential color scale. The D3.js v6 code loads CSV data files for nodes and links, maps link endpoints to their corresponding node objects, and renders the network using SVG circles, paths, and text labels.

Vvivianaaai@qq.com

64% match