Bloom Chart with Konvajs

100%

Bloom Chart with Konvajs

✓ Published0🌍 Public

Last edited Aug 26, 2017

Created on Aug 26, 2017

A Bloom Chart visualizes the co-appearance network of characters in Victor Hugo's Les Misérables, with nodes and links animated by a D3 force simulation and rendered using Konva.js. The chart uses d3.forceSimulation with link, charge, and center forces to position characters by their group, colored via d3.scaleOrdinal with the category20 scheme. Konva layers manage nodes, links, and dragging, with nodes rendered as draggable circles and links as lines. Dragging a node updates the simulation's fixed position, while shadow effects highlight the active node. The visualization combines D3's simulation engine with Konva's canvas rendering for interactive graph exploration.

AI-generated description

This example shows how to render a Bloom Chart using Konvajs.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Voronoi Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, with a Voronoi overlay added to the classic D3 example. A physical simulation of charged particles and springs positions related characters closer together, while the Voronoi tessellation partitions the space around each node, so that any point in the plane can be associated with the nearest character. This makes it easier to select and drag nodes without having to click directly on them. Each character is drawn as a small circle colored by group, with translucent Voronoi cells and gray links representing co-occurrence strength. The visualization uses d3.v4, renders to SVG, and was forked from Mike Bostock’s Force-Directed Graph. Drag any node to reposition it; the simulation and Voronoi cells update live. Data based on character co-appearance in Victor Hugo's *Les Misérables*, compiled by Donald Knuth.

Aalexmacy

79% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation of charged particles and springs to arrange related characters closer together and unrelated characters farther apart. Each node represents a character, colored by group, and links depict co-occurrence with stroke width proportional to connection strength. Built with D3 v4, the visualization uses SVG rendering and supports interactive dragging of nodes. The data is based on Donald Knuth’s character co-occurrence compilation.

Aakollegger

78% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph maps character co-occurrence in Victor Hugo’s *Les Misérables*: each circle is a character, each line a shared scene. A D3 force simulation with charge and link forces groups related characters together, while node color encodes the character’s group and line thickness reflects co-occurrence strength. Built with D3 v4 and rendered as SVG, the graph is interactive — nodes can be dragged to explore the network, and the simulation repositions related characters into proximity. The data was compiled by Donald Knuth and the layout is based on prior work by Tim Dwyer and Thomas Jakobsen.

AAndresAnayaIsaza

78% match

Loading thumbnail…

Clustered Network

This interactive visualization displays the co-appearance network of characters from Victor Hugo’s *Les Misérables*, using a force-directed layout with clustered groups. Nodes represent characters, while edges show shared chapters, with the option to expand or collapse clusters and self-referential links. The example uses D3 v2, employing two `d3.layout.force` instances: one for the primary nodes and another for helper nodes that generate bezier-curved links. Debug modes overlay traces of force.alpha and movement energy, rendered as SVG paths with animated updates, based on data by D. E. Knuth and community groupings from Newman and Girvan.

GGerHobbelt

77% match

Loading thumbnail…

Clustered Network

This interactive visualization displays the weighted coappearance network of characters from Victor Hugo’s Les Misérables. Using D3’s force layout (d3.force) with SVG rendering, nodes represent characters, edges link those appearing in the same chapter, and group labels reflect community structure. Users can drag nodes, click to expand or collapse grouped clusters, and adjust debug sliders that animate force alpha and movement traces. A collision-avoidance grid quantizes node positions based on the largest node size.

GGerHobbelt

77% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph depicts character co-occurrence in Victor Hugo’s *Les Misérables*, with nodes representing characters and links showing shared appearances, based on data compiled by Donald Knuth. The visualization uses d3.v3’s `d3.layout.force` to simulate charged particles and springs, positioning related characters closer together while colors from `d3.scale.category20()` group characters by community. SVG circles and lines render the layout, with link thickness scaled by co-occurrence frequency and hover tooltips revealing names.

SSpaceActuary

77% match

Loading thumbnail…

Clustered Network

The interactive visualization displays the weighted coappearance network of characters from Victor Hugo’s *Les Misérables*, with nodes representing individuals and edges denoting shared chapters. Users can click nodes to expand or collapse clustered groups, revealing community structure. The example uses the D3.js force-directed layout from `d3.forceSimulation`, enhanced with a grid-based collision-avoidance system that quantizes node positions. Rendered as SVG with animation, the interface also plots debug curves showing force alpha and node movement, while links and hulls are drawn using SVG paths.

GGerHobbelt

77% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Victor Hugo’s *Les Misérables*, using a physical simulation to position related characters closer together. The SVG rendering employs `d3.forceSimulation` with link, charge, and center forces to calculate node positions, while link thickness reflects co-occurrence frequency. Nodes are colored by group membership, and drag interactions allow users to adjust the layout. The data comes from Donald Knuth’s compilation of character appearances.

Mmbostock

77% match