Script for Semantic Web Video

100%

Script for Semantic Web Video

✓ Published0🌍 Public

Last edited Dec 15, 2014

Created on Dec 15, 2014

This example visualizes the narrative structure of Flannery O’Connor’s short story *The Life You Save May Be Your Own* as a network of character, location, and thematic nodes. It shows how aliases and descriptive motifs—such as grey, sparks, and blue—link across the text to reveal latent connections. The script uses `d3.forceSimulation` to position the nodes and render edges between them, drawing from a manually curated dataset of story elements. The animation highlights the growing complexity of interconnections as the graph expands.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 513940c8816d089296e3cffc9eba7f08

This visualization combines a force-directed network layout with an annotated narrative about Fox Terriers, mapping character traits and story fragments as connected nodes. The code uses D3’s `forceSimulation` with custom `forceLink` and `forceCollide` to position nodes, while `transition.attrTween` animates path strokes. The underlying data is a JSON structure derived from the Gist’s text, where each node represents a phrase or concept, and edges follow rhetorical links. Rendering relies on SVG paths generated via `d3.geoPath` for map-like background elements, though the core focus is the interactive graph. The visualization shows how anecdotal text segments, such as hunting stories or personality descriptions, form a semantic web, with color intensity encoding sentiment polarity extracted from the original Russian text.

AAlexDovgan

65% match

Loading thumbnail…

A Neo4J Graph Gist of Flannery O'Connor's "The Life You Save May Be Your Own"

This graph gist maps character aliases, locations, professions, and objects in Flannery O’Connor’s “The Life You Save May Be Your Own,” showing how names like “Tom T. Shiflet” connect to multiple false identities and regional towns. The visualization uses a Neo4J graph database with Cypher `CREATE` statements to define nodes and relationships such as `:AKA`, `:FROM`, and `:WAS_MARRIED_TO`. It demonstrates graph-structured literary analysis, relying on the explicit node labels and directed relationship types to reveal narrative networks.

CCliffordAnderson

65% match

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

64% match

Loading thumbnail…

Untitled

This example visualizes the relationship between two converging concepts, emphasizing the search for meaning within a text. The piece uses D3.js’s force-directed graph layout to position nodes representing textual fragments from the v3 source, with edges formed by shared keywords or proximity detected through algorithmic analysis. Rendered as an interactive network, it employs `d3.forceSimulation` for physics-based positioning and `d3.geoPath` to trace connections, highlighting clusters and recurring themes. The visualization suggests an ongoing exploration, where linked elements draw attention to patterns in the source material without imposing a definitive narrative.

GGRAVES1425

64% match

Loading thumbnail…

Gist fd8a31ea3830d17cacb585fc7313b388

This example visualizes the character relationships and scene structure of Shakespeare’s *Hamlet* as a directed network graph. It shows how characters connect across acts and scenes, with nodes representing acts, scenes, and characters, and edges indicating their narrative co-occurrence. The visualization uses a force-directed layout, likely implemented with `d3.forceSimulation`, to position nodes, while the GraphML data is parsed to build the graph. Scene and act nodes are color-coded and labeled by their act/scene numbers, and character nodes carry names, revealing the play’s structural flow. The rendering relies on a browser-based SVG or Canvas context, with the underlying data sourced from the included `ham-graphml.xml` file.

CCliffordAnderson

63% match

Loading thumbnail…

Untitled

This interactive network graph visualizes connections between movies, with each node representing a film and links showing relationships between them. The visualization uses d3.v3 to render the force-directed layout, with nodes colored and sized by their calculated score and level values. Clicking a node displays additional movie details including title, cast, director, and cover image in a side panel. The implementation reads from a movie-network.json data file and uses d3.forceSimulation for the physics-based node positioning and link rendering.

NNathannous

62% match

Loading thumbnail…

Force-Directed Layout

This example visualizes the character co-occurrence network from *Les Misérables* using a force-directed layout with animated node and link appearance. Nodes fade in sequentially, and links become visible only after both connected nodes have appeared. The code uses D3’s `d3.layout.force` for physics simulation and SVG circles and lines for rendering, with chained `transition()` calls and `delay` timing to stagger the entrance. Node color encodes group membership via `d3.scale.category20`, while link thickness reflects the edge value.

GGerHobbelt

62% 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

62% match