Fork of Force-Directed Graph click

100%

Fork of Force-Directed Graph click

✓ Published1🌍 Public

Last edited Jun 5, 2023

Created on Jun 5, 2023

A force-directed network graph visualizes character co-appearance data from *Les Misérables*, parsed from a plain-text edge list. Clicking a node reveals its label and updates the visualization, while clicking it again resets the view. The SVG rendering uses `d3.forceSimulation` with link, charge, and center forces, plus `scaleLinear` to map link weights to stroke width and opacity. Custom click, mouseover, and mouseout handlers control label visibility, and a `d3.zoom` behavior supports panning and scaling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph click

This interactive visualization shows the character network from Les Misérables as a force-directed graph. Users can pan and zoom the SVG canvas, while hovering over nodes reveals character names and dragging nodes rearranges the layout dynamically. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, with link thickness and opacity scaled by connection weight via d3.scaleLinear. Node colors are randomly assigned per group, and the data comes from a text file parsed by a custom graphUtils function that extracts nodes, links, and weights from whitespace-separated values.

KKhanin Sisaengsuwanchai

89% match

Loading thumbnail…

Fork of Force-Directed Graph

This is an interactive force-directed graph that visualizes the network of characters from *Les Misérables*, based on the classic `miserables.json` dataset. Nodes are colored by their assigned group and can be dragged around the canvas, triggering the physics simulation to recalculate positions. Implemented with D3.js functions `forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, and `drag`, the graph also supports zooming and panning via a `d3Zoom` handler, while node labels appear on hover. The SVG rendering displays nodes and links in full-screen, with node positions updated on each simulation tick.

KKhanin Sisaengsuwanchai

88% match

Loading thumbnail…

Force-Directed Graph new format

This interactive network visualization displays the connections between characters in the Les Misérables dataset using a force-directed layout. Nodes represent individual characters, colored by their assigned group, while links show relationships with stroke width and opacity scaled by connection weight. The graph is rendered as an SVG that supports zooming, with node labels appearing on hover. The implementation uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter for physics-based positioning, and d3.zoom for interactive exploration. Data is fetched from a remote source and parsed into a graph structure with a custom function.

KKhanin Sisaengsuwanchai

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

86% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

KKarkG

85% match

Loading thumbnail…

Fork of Relation Graph with d3-force

This example shows a force-directed network graph of relationships between characters in Les Misérables, with nodes colored by group and sized by link value. Users can drag nodes to reposition them and zoom into the graph using their mouse or trackpad. The visualization is built with d3-force’s forceSimulation, forceLink, forceManyBody, and forceCenter, along with d3’s zoom and drag behaviors. Data is loaded as JSON from a GitHub gist, and all elements are rendered as SVG.

JJames Bradbury

85% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates a force-directed graph of character relationships from *Les Misérables*, rendered as an interactive SVG network. The visualization uses `d3.forceSimulation` to position nodes and links, with drag support via `d3.drag` for user manipulation. Node colors encode character groups using `d3.scaleOrdinal` and the `d3.schemeTableau10` palette, while link weights reflect connection strength. The code loads data from a local `miserables.json` file and builds the visualization with D3 v5's selection and join methods.

SShengHao-Shi

84% match

Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric

84% match