wqp782@haw-hamburg.de

Fork of Basic Circle Pack Juliane neu

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.

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

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.

Fork of Clickable Circles

This interactive example displays a collection of clickable circles, known as "bubbles," arranged across a light-green canvas. A click on any bubble triggers a popup overlay revealing its position, radius, and color values. The visualization implements a unidirectional data flow pattern using a custom state management function, while D3 v7's `select` and data join methods handle the SVG rendering and click events. The red-toned palette creates a cohesive, simple interface for exploring the static dataset.