Skip to main content
SimilarExport ZIP
100%

Grouping by Act & Scene in Julius Caesar

✓ Published0🌍 Public
CCliffordAnderson
Last edited Jun 14, 2014
Created on Jun 13, 2014

This visualization groups characters from *Julius Caesar* by their appearances across acts and scenes, using a force-directed layout to reveal co-occurrence patterns. The code extracts character IDs from TEI-encoded text, pairs each with its act-scene location, and groups appearances by character. It relies on XQuery for data processing and d3.forceSimulation for the network layout, with rendering handled via SVG elements. The grouping emphasizes which characters share scenes, highlighting narrative clusters and isolated figures.

AI-generated description

Similar vizzes

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
66% 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
62% match
Loading thumbnail…

Untitled

This visualization shows the network of character interactions from Victor Hugo’s *Les Misérables*, using a force-directed layout to cluster characters into groups by their relationships. Nodes represent characters and are colored by their group; links represent co-appearance, with thickness proportional to interaction weight. The example uses D3 v4’s `d3.forceSimulation` for the physics engine, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to shape the layout, and `d3.drag` for interactive node dragging. Data comes from the included `miserables.json` file, rendered as SVG elements.

Kkalokli8
62% match
Loading thumbnail…

Untitled

A force-directed network graph of character co-appearances from *Les Misérables* is shown. The layout separates nodes by community group with color, and hovering a node highlights only that node's neighborhood, dimming other links and text labels. The code uses `d3.forceSimulation` for both the main graph and a secondary label layout, plus `d3.drag`, zoom via `d3.zoom`, and SVG circles and lines. Node labels are positioned with a custom spring-like offset calculation based on text bounding boxes.

Ssgzzhinde
61% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph maps character co-occurrence in Victor Hugo’s *Les Misérables*: each circle is a character, each line a shared scene. A D3 force simulation with charge and link forces groups related characters together, while node color encodes the character’s group and line thickness reflects co-occurrence strength. Built with D3 v4 and rendered as SVG, the graph is interactive — nodes can be dragged to explore the network, and the simulation repositions related characters into proximity. The data was compiled by Donald Knuth and the layout is based on prior work by Tim Dwyer and Thomas Jakobsen.

AAndresAnayaIsaza
60% match
Loading thumbnail…

Grouped Force Layout

This visualization uses a grouped force layout to cluster the character network from *Les Misérables* by community. Draggable nodes are colored by group, with links showing connections, while a Voronoi overlay dynamically partitions the space to visually reinforce each cluster’s territory. The simulation runs on `d3.forceSimulation` with link and charge forces, and custom logic on each tick adjusts node positions toward their group’s centroid. The Voronoi cells, rendered as SVG paths via `d3.voronoi`, update continuously as the layout settles or as users drag nodes.

FFrissAnalytics
60% match
Loading thumbnail…

Clustered Network

This interactive visualization displays the co-appearance network of characters from Victor Hugo’s *Les Misérables*, using a force-directed layout with clustered groups. Nodes represent characters, while edges show shared chapters, with the option to expand or collapse clusters and self-referential links. The example uses D3 v2, employing two `d3.layout.force` instances: one for the primary nodes and another for helper nodes that generate bezier-curved links. Debug modes overlay traces of force.alpha and movement energy, rendered as SVG paths with animated updates, based on data by D. E. Knuth and community groupings from Newman and Girvan.

GGerHobbelt
60% match
Loading thumbnail…

Clustered Network

This interactive visualization of the Les Misérables character network supports collapsing and expanding clusters of characters, showing the weighted coappearances from Knuth's Stanford GraphBase data. The example uses d3.v2 with `forceSimulation` to layout both group and leaf nodes, and renders nodes, links, and cluster hulls as SVG elements. Users can click nodes and hulls to cycle through display modes, which illustrate a chained force layout where a secondary force calculation positions helper nodes for drawing curved links.

KKuerzibe
59% match