Skip to main content
SimilarExport ZIP
100%

forcedlayout

✓ Published1🌍 Public
NNeeraj Kumar
Last edited Jan 23, 2024
Created on Jan 14, 2024
Forked from packedlayout

This visualization displays the character network from Les Misérables as an arc diagram. Nodes are arranged linearly along a horizontal axis, sorted by group membership, while links between characters are drawn as curved arcs beneath the line. Hovering over a node reveals a tooltip with the character’s name. The implementation uses D3.js v3 to generate SVG elements, employing d3.scale for positioning and colors, and d3.svg.line.radial for the arc paths.

AI-generated description

My fisrt viz with javascript

MIT Licensed

Similar vizzes

Loading thumbnail…

Arc

This visualization displays the character network from Les Misérables as nodes arranged along a horizontal line, with curved arcs connecting interacting characters. Node color distinguishes character groups, while link thickness and color encode interaction strength using a sequential color scale. The D3.js v6 code loads CSV data files for nodes and links, maps link endpoints to their corresponding node objects, and renders the network using SVG circles, paths, and text labels.

Vvivianaaai@qq.com
87% match
Loading thumbnail…

Untitled

A force-directed network diagram visualizes character relationships from Les Misérables, with nodes representing characters and curved links indicating interactions between them. The graph uses d3.forceSimulation with link, charge, and center forces to position elements, while zoom and drag interactions enable exploration. The code loads miserables.json data and renders the network as SVG, assigning colors by group membership and using intermediate nodes to create curved edge paths.

JJoker-tr
84% 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
84% 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
83% match
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
83% match
Loading thumbnail…

Metis Class Les Miserables Force Layout

This example visualizes the co-occurrence network of characters in *Les Misérables* as a force-directed graph. Nodes represent characters, colored by their group membership, while links show relationships between characters. Built with D3 v4, the visualization uses a force simulation with link and many-body repulsive forces to position the nodes. The SVG circles and lines update their positions on each tick of the simulation, creating a dynamic layout of the character network. The graph is rendered at 500 by 500 pixels with a categorical color scale distinguishing character groups.

EElaineYu
83% match
Loading thumbnail…

NetworkChartLEGENDS

A network diagram of character interactions from Les Misérables uses a force-directed layout with nodes colored by character group and a legend mapping each category. The visualization applies a D3 force simulation (d3.forceSimulation with link, charge, and center forces) to position nodes, while links are drawn as lines with stroke widths proportional to interaction value. A color legend, built via a custom colorLegend function, displays the scale domain using d3.scaleOrdinal with d3.schemeCategory10. Node positions update on simulated ticks, and the source data comes from a JSON file containing nodes and links.

VVamsi Krishna
83% 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
83% match