Force-Directed Parallel Coordinates

100%

Force-Directed Parallel Coordinates

✓ Published0🌍 Public

Last edited Aug 3, 2016

Created on Aug 3, 2016

A force-directed graph of character co-occurrence in *Les Misérables* sits beside a parallel coordinates chart tracking each node's x, y, and group membership. Dragging a circle in the network updates its corresponding polyline in real time, using the same underlying data. The SVG visualization is built with d3.v2 and Underscore, leveraging `d3.layout.force`, `d3.svg.axis`, and `d3.svg.line`. The y-axis is reversed to match SVG's top-down coordinate system.

AI-generated description

forked from <a href='http://bl.ocks.org/syntagmatic/'>syntagmatic</a>'s block: <a href='http://bl.ocks.org/syntagmatic/2556042'>Force-Directed Parallel Coordinates</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado

87% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Les Misérables, grouping related characters into proximity while separating unrelated ones. Drawn as SVG circles and lines, nodes are colored by group and links weighted by interaction frequency. The data, compiled by Donald Knuth and stored in `miserables.json`, drives a `d3.forceSimulation` with link, charge, and center forces. Interactive dragging is enabled via `d3.drag`, while node positions update on each simulation tick.

NNate-Holland

86% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes representing characters and links indicating shared appearances. The layout uses D3 v4’s `d3.forceSimulation` and `d3.forceLink`, though the standard simulation is commented out, leaving nodes positioned randomly via `Math.random` while links are drawn with calculated coordinates. Node color encodes group membership via `d3.scaleOrdinal` and `d3.schemeCategory20`, and drag interactions are enabled with `d3.drag`. The data is compiled by Donald Knuth and rendered as SVG.

ZZhengyan Yu

86% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes positioned so related characters cluster together. The simulation uses d3.forceSimulation with link, charge, and center forces, while nodes are draggable circles colored by cluster and links are lines with stroke-width scaled by co-occurrence value. The code loads data from a JSON file and renders everything as SVG.

MMNoichl

86% match

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph maps character co-occurrence in *Les Misérables*, using a physics simulation of charged particles and springs to position related characters closer together. The SVG rendering relies on `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, while `d3.drag` enables nodes to be pulled and released. An outer pie chart (`d3.pie`, `d3.arc`) encodes character groups around the layout. Data derives from Donald Knuth’s Stanford GraphBase compilation of Hugo’s novel.

ZZhengyan Yu

85% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with related characters drawn closer together through a physical simulation of charged particles and springs. Nodes are colored by group and links are weighted by co-occurrence frequency. The implementation uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG lines and circles with drag interaction. Data is from Donald Knuth’s character co-appearance compilation.

MMettiHoof

85% match

Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Cchungmin-yu

84% match

Loading thumbnail…

29.Force-Directed Graph

This example shows a force-directed graph of character co-appearances in *Les Misérables*, with nodes colored by group membership and link thickness scaled by interaction weight. Using D3 v4, it loads data from `miserables.json` and runs a `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions. Nodes and links render as SVG circles and lines, and the visible `ticked` function updates their coordinates. The code also wires up `d3.drag` handlers to let viewers reposition nodes.

深深度碎片

84% match