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

100%

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

✓ Published0🌍 Public

Last edited Dec 14, 2021

Created on Dec 14, 2021

Forked from 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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Relation Graph with d3-force

This visualization shows the network of character co-appearances in Les Misérables as a force-directed graph, with nodes colored by group using d3.schemeCategory10 and links weighted by interaction frequency. The graph supports interactive dragging of individual nodes via d3.drag, and users can zoom and pan the entire view using d3.zoom with a scale range up to 8x. The simulation is computed with d3.forceSimulation, combining forceLink, forceManyBody, and forceCenter, while the SVG rendering updates node positions on each tick. Data is loaded asynchronously from a JSON file containing the Miserables dataset.

VVictor Lorena

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

87% match

Loading thumbnail…

Fork of 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`.

SSnapika

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

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

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

87% match

Loading thumbnail…

Untitled

This example shows a force-directed network graph of character co-appearances in Les Misérables, with curved links connecting nodes. The visualization uses D3 v4’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive dragging. Each original link is split into two straight segments through an intermediate node, and `path` elements with quadratic Bézier curves (`S` commands) render these bilinks as smooth arcs. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from the included `miserables.json` file, rendered as SVG.

RRivaan

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

86% match