Skip to main content
SimilarExport ZIP
100%

Fork of Basic Circle Pack (Matthias)

✓ Published1🌍 Public
MMatthias Stahl
Last edited Jan 23, 2026
Created on Jan 23, 2026

A circle-packing visualization displays terms associated with right-wing dogwhistles, with circle size reflecting each term's weight. Clicking a circle zooms into it and opens an overlay presenting the term's origin, meaning, dogwhistle usage, and a related quote. The implementation uses d3.pack and d3.hierarchy to compute the layout, SVG circles with randomized red fills, and D3 transitions to animate the zoom effect. Data comes from a local data.json file containing the term descriptions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Basic Circle Pack (Matthias) und Juliane

This visualization presents German political buzzwords as an interactive circle packing diagram, with each term mapped to a colored circle sized according to its relative significance. Clicking a circle triggers a zoom animation into the node while displaying a detailed overlay panel containing the term’s etymology, meaning, dogwhistle usage, and a political quote. Built with D3 v5, the code uses `d3.pack` and `d3.hierarchy` for layout, SVG transitions for zooming, and custom zoom reset functionality via click or Escape key. Data is loaded from an external JSON file containing linguistic and contextual information for each term.

Wwqp782@haw-hamburg.de
87% match
Loading thumbnail…

Fork of Fork of Fork of Basic Circle Pack (Matthias) und Juliane

This example shows an interactive circle-pack visualization of French political dogwhistles. Clicking a bubble zooms it to the center and opens an overlay with the term’s origin, meaning, rally-signal function, and usage example, with a toggle switch between French and English translations. Built with d3.v5, it uses `d3.pack()` and `d3.hierarchy()` to compute the packed layout, renders circles and labels as SVG with multi-line text wrapping, and relies on D3 transitions for zoom and fade effects. Data comes from a local `data.json` file.

Ppeter.sime@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of Basic Circle Pack Juliane

This D3.js v5 gallery example visualizes a dataset of politically charged German terms as a packed circle layout. The circle-packing algorithm `d3.pack()` generates the hierarchical arrangement, with each circle sized by the term’s assigned `value`. Interacting with the visualization uses animated SVG transitions: clicking a circle triggers `g.transition()` to zoom and pan the view, and opens an overlay displaying detailed information about the term’s origin, meaning, dogwhistle usage, and a quote. The data is loaded from a JSON file via `d3.json()`.

Wwqp782@haw-hamburg.de
85% match
Loading thumbnail…

Fork of Basic Circle Pack Juliane neu

This circle packing visualization displays the semantic relationships between politically charged German terms, such as “Remigration” and “Globalisten,” with circle size representing data values. Using D3 v5’s `d3.pack` and `d3.hierarchy` APIs, the SVG plot arranges circles non-hierarchically. Clicking a circle zooms and opens an overlay panel with detailed etymological origins, meanings, and usage notes from the JSON data source. The implementation also includes animated transitions via `transition()`, interactive resizing, and keyboard controls for resetting the view.

Wwqp782@haw-hamburg.de
83% match
Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1
81% match
Loading thumbnail…

Fork of Basic Circle Pack

This example demonstrates an interactive circle-packing visualization with buttons to add or remove datasets. It uses a color scale that maps value domains to HSL hues, while animated zoom transitions and click interactions reveal hierarchical data structures. The visualization relies on d3.pack for layout, d3.hierarchy for tree construction, and d3.interpolateZoom for smooth viewpoint transitions. SVG elements render circles and labels, with click events triggering focus changes and color strokes for selection feedback.

Wwqp782@haw-hamburg.de
80% match
Loading thumbnail…

Basic Circle Pack

A hierarchical circle-packing visualization displays nested data as clustered bubbles, with zooming and panning via mouse clicks. The demo uses D3.js v5 to construct the SVG layout, apply an HSL color scale by depth, and animate transitions between hierarchy levels using `transition` and `interpolateZoom`. Buttons add or remove data nodes, while the pack layout is generated with `d3.pack` and `d3.hierarchy`. The dataset is hardcoded from a “flare” file structure.

BBrett Cunningham
76% match
Loading thumbnail…

Basic Circle Pack 2 - working

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

BBrett Cunningham
76% match