Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Basic Circle Pack Juliane

✓ Published0🌍 Public
Wwqp782@haw-hamburg.de
Last edited Jan 26, 2026
Created on Jan 26, 2026

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()`.

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
89% match
Loading thumbnail…

Fork of Basic Circle Pack (Matthias)

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.

MMatthias Stahl
85% 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
82% 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 Circles with D3

This example demonstrates how D3.js creates and binds a dataset of circle objects to SVG elements, rendering them with varied positions, radii, and fill colors against a light green background. The D3 data join pattern, method chaining via `selectAll` and `attr`, and the general update pattern are used to handle repeated rendering safely. The visualization is built from a static JSON-like array of circle properties, with opacity applied for a subtle overlap effect, showcasing the core mechanics of D3’s declarative, data-driven approach to DOM manipulation.

HHOURPRIMERA@GMAIL.COM
77% match
Loading thumbnail…

Fork of Project circularPacking

This example visualizes a hierarchical dataset of CERFACS researchers using a zoomable circular packing layout in D3. Clicking a non-root circle zooms into that node’s subtree, while clicking the background returns to the full view, with smooth animated transitions. It renders circles and text labels in SVG, using `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom`. The code also demonstrates ES6 module imports and loads data from a local JSON file.

YYiorgos Bagakis
77% match
Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal
77% 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