Herodotus Interactions Web

100%

Herodotus Interactions Web

✓ Published0🌍 Public

Last edited Sep 5, 2017

Created on Aug 25, 2017

This example shows a force-directed graph of proper-noun co-occurrences in Herodotus’s Histories, with nodes representing people, places, and groups, and link thickness proportional to interaction frequency. Only pairs with more than 25 interactions appear. The layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while nodes are colored by assigned groups via `d3.scaleOrdinal`. Data comes from a JSON file, rendered as SVG circles and lines with drag support.

AI-generated description

This simple force-directed graph shows proper-noun co-occurence in * The Histories of Herodotus Herodotus: 440 B.C.E. (English Translation) *.

Only interaction pairs with greater than 25 interactions are show. Line wieghts are directly proportion to the number of interactions between each person/place/group.

A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by [Tim Dwyer].

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4062045'>Force-Directed Graph</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/a2a7b2a3f6911b2e7dc1176e7c8f751f'>Game of Thrones Interactions</a>

forked from <a href='http://bl.ocks.org/Lichtphyz/'>Lichtphyz</a>'s block: <a href='http://bl.ocks.org/Lichtphyz/605c321a7714be62d15e76ff98cd3791'>Game of Thrones Interactions Web</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Lord of the Rings Interactions Web

This interactive force-directed graph visualizes character co-occurrence in *The Lord of the Rings* trilogy, showing which characters appear together in the text. Node color encodes group membership, while link thickness indicates the frequency of interactions. The layout uses d3.forceSimulation with link, charge, and center forces, and the graph is rendered as SVG. Data comes from LotR_interactions.json, with links filtered to show only interactions of 55 or more occurrences within a three-sentence window.

LLichtphyz

75% match

Loading thumbnail…

Game of Thrones Interactions Web

A force-directed network graph maps character co-occurrence in *Game of Thrones*, with line thickness proportional to interaction frequency above a threshold of 55. Node colors represent character groups, and labels identify each figure. Built with D3 v4, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the network. Data comes from the included `GoT_interactions_draft.json` file.

LLichtphyz

75% match

Loading thumbnail…

Network Graph

A force-directed network graph visualizes social connections among ten people, with labeled nodes and directed, arrowed links. Node size reflects connection strength through link thickness, and hovering highlights a node. The example uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, rendering in SVG. Data comes from `graph.json` and includes relationship types and values. Interactive dragging is implemented via `d3.drag`.

Iindushashi.g@gmail.com

73% match

Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775

72% match

Loading thumbnail…

Relation Graph with d3-force

A relation graph of 410 nodes and their pairwise connections, rendered as an interactive SVG force-directed diagram. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, with each node colored by its group via `schemeCategory10`. Clicking a node highlights all its connected links in red and marks the corresponding cells in an adjacent adjacency matrix, which is rendered as a grid of SVG rectangles. Users can drag nodes to reposition them and zoom into the graph.

Ttoeric

72% match

Loading thumbnail…

Gist 42f2a3f8bdbf9468dea8f6274d2dac31

This interactive force-directed graph visualizes relationships among a set of nodes using D3.js’s `d3.forceSimulation` API. The layout emerges from simulated physical forces, with nodes repelling and links attracting them to reveal clusters. The code also implements mouse drag-and-drop interaction, allowing users to reposition nodes in real time, which perturbs the equilibrium and triggers the simulation to recalculate. The visualization renders nodes as circles and links as straight lines, with the underlying data and force parameters defined inline within the JavaScript source.

AAnaMal08

72% match

Loading thumbnail…

h

This D3.js visualization shows a small network of nine named individuals connected by directed links, rendered as a force-directed graph with labeled circular nodes and arrowed edges. The force simulation, driven by `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCollide`, positions the nodes on an SVG canvas. Nodes are interactive—they can be dragged to reposition the layout, which then re-settles. The qualitative data comes from a local `data.json` file specifying node groups and link values, with the static SVG output styled via CSS.

Ppreethamkesa

72% match

Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes

71% match