Hamilton characters #2

100%

Hamilton characters #2

✓ Published0🌍 Public

Last edited Oct 5, 2018

Created on Oct 5, 2018

This visualization maps the speaking appearances of characters from the musical *Hamilton* across its songs and lines. It shows each character's presence by arranging colored circles on a grid, where circle radius represents the number of lines in each song for that character. The circles are positioned near labels for each character and use a force-directed layout via `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to cluster appearances. Data is loaded from `characters.json` and `lines.json`, and the circle positions are updated on each simulation tick.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/3f496d692e57e906316173a290c3d6d4'>Hamilton: characters</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/570df88e66e420191d33dc5b5650aaf4'>Hamilton characters #2</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Broadway Interactive

This interactive visualization compares the cumulative box-office revenue of the Broadway musical Hamilton with the average of other Broadway shows from July 2015 to April 2016. Two line charts, rendered as SVG with animation, allow users to toggle between datasets and adjust a time-range slider using the custom d3.slider.js library. The visualization relies on D3.js for scaling, axes, and path generation, drawing data from the included CSV files to highlight Hamilton’s rapid revenue ascent against the industry baseline.

BBenHeubl

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

68% match

Loading thumbnail…

Force directed graph

This example shows a force-directed graph of character co-occurrence data from Les Misérables, rendered as an interactive SVG animation. It uses d3.forceSimulation to position nodes and links, with draggable circles representing characters and colored convex hulls drawn around groups of three or more nodes sharing the same group attribute. The hulls are generated using d3.polygonHull and closed curves, with a dropdown to switch between curveBasisClosed, curveCardinalClosed, curveCatmullRomClosed, and curveLinearClosed. The visualization is built with D3 v4 and React, loading graph data from a JSON file.

Kkalokli8

68% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous

67% match

Loading thumbnail…

(^^)

A force-directed network diagram displays the relationships among characters in the novel *Les Misérables*. Nodes represent individual characters, colored by their community group, while links indicate co-appearance, with line thickness proportional to interaction strength. Nodes can be dragged interactively, causing the simulation to adjust the layout. The visualization uses `d3.forceSimulation` for physics, `d3.drag` for node manipulation, and `d3.schemePaired` for categorical coloring, rendering in SVG within a React framework. Data is loaded from a JSON file hosted on GitHub.

CCyc-Evelyn

67% match

Loading thumbnail…

Graph for picture taking

This force-directed graph visualizes character co-occurrence in *Les Misérables*, showing how often pairs of characters appear together. The D3 `d3.forceSimulation` API positions related characters closer together while repelling unrelated ones, with link stroke width reflecting co-occurrence frequency. Nodes are colored by cluster and rendered as SVG circles, with tooltips showing character names. The layout uses D3 v4 forces including `forceManyBody`, `forceLink`, and `forceCenter`, with drag interactions enabled via `d3.drag`. Data comes from Donald Knuth’s compiled character co-appearances.

MMNoichl

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

67% match

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes character co-appearance relationships from the *Les Misérables* dataset. Nodes represent characters and are colored by their assigned group, while black links connect characters that appear together. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute physics-based layouts. Nodes and labels are rendered as SVG circles with drag functionality, and a zoom transform is applied via the d3 zoom controller.

KKhanin Sisaengsuwanchai

67% match