Skip to main content
SimilarExport ZIP
100%

Fork of Network

✓ Published0🌍 Public
SSnapika
Last edited Apr 4, 2022
Created on Apr 3, 2022
Forked from Network

This example visualizes a small network of characters from *Les Misérables*, colored by group and connected by a single link. Using D3.js v5, it loads data from a JSON file and applies a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Circles represent nodes in SVG, positioned dynamically on each simulation tick, while lines show edges with stroke width proportional to link value. Node colors come from a `d3.scaleOrdinal` with `d3.schemeCategory10`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Network

This force-directed network graph visualizes character relationships from Les Misérables, with nodes colored by group category (Document, Email, Person, Location, etc.) and link thickness scaled by connection value. The simulation uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while a colorLegend component renders the categorical color scale. SVG circles and lines are updated on each tick, and the data loads from a JSON file containing nodes and weighted links.

Xxbambambs
93% match
Loading thumbnail…

Fork of Network

A force-directed network graph visualizes the relationships between characters from Les Misérables, with nodes colored by their categorical group (Document, Email, Person, Location, etc.). The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the graph. A color legend generated via `colorLegend` maps group categories to `d3.scaleOrdinal` colors. Data is loaded from a JSON file.

Xxie ming better
92% match
Loading thumbnail…

Fork of Network

This network graph visualizes character relationships from Les Misérables, with nodes representing characters colored by group membership and link thickness reflecting interaction strength. The SVG visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3.select and data joins render circles and lines. Node colors come from a d3.scaleOrdinal with schemeCategory10, and the simulation tick event updates element positions dynamically.

Yyejichun@naver.com
92% match
Loading thumbnail…

Network

This network visualization shows the relationships between characters from *Les Misérables*, with nodes colored by group and link thickness representing connection strength. The force-directed layout uses `d3.forceSimulation` with link, many-body charge, and center forces to position the SVG elements. The code loads JSON data, creates circles and lines, and updates their positions on each simulation tick using D3's selection API.

Llukeod
90% match
Loading thumbnail…

Fork of Network Visualization

This network visualization displays the character relationships from Les Misérables, with nodes colored by group type and a legend mapping categories like Document, Email, and Person. It uses d3.forceSimulation with link, charge, and center forces to position the nodes, while links are rendered as lines whose stroke width reflects edge weight. The SVG is built using d3.v5, with nodes and links appended as circles and lines, and a custom colorLegend function creates the legend using d3.scaleOrdinal with the schemeCategory10 palette.

Hherbertamakloe
90% match
Loading thumbnail…

Fork of Network

This visualization displays a character interaction network from Les Misérables, with nodes colored by group affiliation (Document, Email, Person, Location, Organization, Email Address). The SVG rendering uses d3.forceSimulation with link, charge, and center forces to position interconnected characters. Node colors derive from a d3.scaleOrdinal with schemeCategory10, while a colorLegend component shows the category mapping.

Ddas888530
89% match
Loading thumbnail…

Network

A force-directed network graph displays characters and groups from *Les Misérables*, with nodes colored by category and directed links styled by relationship type, such as email or mention. The visualization relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements, rendered as SVG circles and lines. A custom `colorLegend` function generates two legends, using circles for node categories and rectangles for link types, while drag interactions let users reposition nodes. Data loads from a JSON file, and edge colors and arrow markers highlight connection semantics.

Aala-wahibi
89% match
Loading thumbnail…

Fork of Force Directed Graph Starter

This example shows a force-directed network graph of characters from Les Misérables. The SVG renderer uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, with nodes and links drawn as circles and lines. The data, consisting of 77 character nodes grouped by affiliation and weighted links between them, is hardcoded in the script and fully visible in the source.

OOwen Thiele
88% match