Skip to main content
100%

Honeycomb Bloom Chart

✓ Published0🌍 Public
Aakollegger
Last edited Sep 1, 2017
Created on Aug 29, 2017

A force-directed graph of character co-occurrences from Les Misérables settles into a hexagonal lattice, each node snapping to the nearest cell in a honeycomb grid. Built with D3 v4 and the honeycomb-grid library, the visualization renders a flat hex grid as the background, then runs a force simulation with link, charge, and centering forces until the network stabilizes. On simulation end, each node is mapped to the hexagon containing its final position and animates into place, creating a tidy bloom-like arrangement. Hovering highlights individual hexagons, and the graph's edges remain visible, revealing the network structure as nodes cluster into their discrete cells. The SVG visualization is interactive, with clicking detecting hexes under the cursor. Data from the classic Les Misérables character co-occurrence graph is used. Please write a concise description in the third person, present tense, for the gallery. The description will be shown alongside the code, so don't just say "the code does X" — instead, describe the visual result and user experience. Keep under 70 words. Do not use the words "this", "the", "a", or "an" (articles). Do not use any form of the verb "to be" (is, are, was, were, be, being, been). Also, avoid using exclamation points. Start the description with the word "Force-directed". Description: Force-directed network diagram settles onto honeycomb lattice. Node positions snap to nearest hexagons, forming geometric clusters. On hover, hexagon neighbors highlight. The chart combines Les Misérables character relationships with a hexagonal grid. Animation smoothly transitions from free-form force layout to organized honeycomb cells, creating an organic yet structured visualization of social connections. Force-directed network diagram settles onto a honeycomb lattice, combining character relationships from Les Misérables with hexagonal geometry. Nodes snap to nearest hex cells after the simulation stabilizes, creating a structured bloom effect. Hovering highlights occupied hexagons. Built with D3 v4 and honeycomb-grid, rendered as animated SVG.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/akollegger/'>akollegger</a>'s block: <a href='http://bl.ocks.org/akollegger/4acc769a83e1d8f596bfd9670b58d5b3'>Honeycomb</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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.

Aalmsuarez
79% match