D3 in Action Chapter 6 - Example 1

100%

D3 in Action Chapter 6 - Example 1

✓ Published0🌍 Public

Last edited May 6, 2021

Created on Apr 27, 2021

This example shows an adjacency matrix of character co-appearances in Les Misérables, where each cell is a colored rectangle representing the weight of a connection between two characters. The visualization uses a custom `d3.layout.adjacencyMatrix` layout to compute cell positions and weights, then renders them as SVG rectangles with fill opacity proportional to link weight. Color encodes character group membership via a `d3.scale.category20b()` scale, and axes are generated with `d3.svg.axis` using ordinal scales of character names. The source data is loaded from `miserables.json`.

AI-generated description

MIT Licensed

Similar vizzes

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.

深深度碎片

79% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrences in *Les Misérables*, with character names displayed directly beside each node. The visualization uses D3.js v4’s force simulation to position nodes and links, grouping SVG circles and text labels inside `<g>` elements so names travel with their nodes during drag and layout. Node colors encode character group membership, while link thickness reflects the strength of co-occurrence. The graph is interactive—nodes can be dragged, and the simulation restarts on interaction—and is rendered entirely in SVG with a clean, minimal style.

GGerardoFurtado

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

77% match

Loading thumbnail…

Les misérables (graphe)

This D3.js force-directed graph visualizes the character interactions in Victor Hugo’s *Les Misérables*, using a JSON dataset of nodes (characters) and weighted links (co-appearances). The SVG rendering uses `d3.forceSimulation` with link, many-body charge, and centering forces to position nodes, while node fill colors are assigned by categorical group via `d3.scaleOrdinal`. Link stroke-width encodes interaction strength, and nodes are draggable, with a tooltip showing each character’s name.

JJulesSauvinet

77% match

Loading thumbnail…

TP 6 DataViz

This example visualizes the co-occurrence network of characters in *Les Misérables*, using D3 v4’s force-directed simulation. Nodes represent individual characters, colored by their group, while links show relationships weighted by their value. The graph is rendered as SVG circles and lines, with node labels available via tooltips. The simulation includes charge and center forces, and nodes are draggable. The data is loaded from a local JSON file, and the tick function is present but commented out, meaning the layout is computed but node/link positions are not updated on screen—a possible bug in the example.

JJulesSauvinet

77% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous

77% match

Loading thumbnail…

D3.js v4 Force Directed Graph with Labels

This example shows a force-directed graph of character co-occurrence in *Les Misérables*, with each character’s name displayed beside its node. It adapts Mike Bostock’s original diagram by wrapping each circle and its text label in a `<g>` element, enabling labels to move with nodes during interaction. The visualization uses D3.js v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout, and renders with SVG. Nodes are color-coded by group using `d3.scaleOrdinal` and `d3.schemeCategory20`, with data loaded from a `miserables.json` file.

GGerardoFurtado

77% match

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

77% match