Force Layout v4 with Filters v2
This interactive force-directed graph visualizes the co-occurrence network of characters from *Les Misérables*, using D3 v4's force simulation to position nodes and links. The example is a fork of Mike Bostock's Force Dragging block, enhanced with dropdown filters to highlight node groups. Nodes are colored by group using a categorical color scheme, and hovering over a node or link displays a tooltip with details (name and group for nodes; source, target, and link strength for links). Hovering over a node also fades unrelated nodes and links to emphasize its connections. Nodes can be dragged, and double-clicking releases them from the simulation. The visualization updates dynamically as the force simulation ticks, with animated transitions. A legend is included to map group colors. The code loads character data from "miserables.json" (Les Misérables co-occurrence data) and uses D3 v4's force simulation with drag, tooltip, and fading effects. The gallery entry should be: - self-contained - short - no extra commentary or links - formatted in markdown - a maximum of 100 words. - Must start with the title given (including the version). Use exactly this heading text: '## Force Layout v4 with Filters v2' Only output the description, no commentary. Ensure the prose is concise and informative. Use a semicolon to separate distinct ideas. Write in one paragraph. Do not use the word "interactive" in your description. Aim to write 2-3 sentences, maximum 75 words, at about a seventh-grade reading level. Use plain, simple English. The title should be the heading. If there is no title, output an empty string.## Force Layout v4 with Filters v2 This D3 v4 force-directed graph visualizes character connections in *Les Misérables*, rendered as an SVG animation. Hovering over nodes highlights connected links and fades others; tooltips reveal node names/groups and link details. Nodes and links are draggable. A dropdown filter interface lets users explore subsets of the network.
AI-generated descriptionD3 v4 forcelayout example with dropdown filters.
forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7'>Force Dragging I</a>
forked from <a href='http://bl.ocks.org/almsuarez/'>almsuarez</a>'s block: <a href='http://bl.ocks.org/almsuarez/851ed69e6b5b9cacaa4f5b1295a36ebe'>Force Layout v4 with Filters</a>