Valentin Edelsbrunner

@vedelsbrunner·3 public vizzes

D3 Bubble Visualization

This example shows a force-directed bubble visualization with 30 nodes constrained inside a circular boundary. Nodes belonging to the "inside" group are randomly sized and remain confined within the bubble's radius, while "outside" nodes are smaller and free to move. Using d3.forceSimulation with charge, center, and collide forces, the simulation updates node positions on each tick, rendering SVG circles via join operations. The code draws circles with D3 v6 and applies clamping logic in the tick function to keep inner nodes within the gray circular outline.

Sep 21, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3.js version 7 in a web page. It uses the `select` method from the D3 library to target the body element and sets its text content to display a static message. The page loads D3 via a CDN link and executes the logic in an external JavaScript file. The example focuses solely on displaying a simple string output without any data binding, scales, or animations.

Sep 20, 2023

Loading thumbnail…

Fork of Hierarchical Word Clustering

This interactive circular packing visualization displays hierarchical word clusters from a news article dataset, with each circle representing a word and its size proportional to article frequency. Users can click circles to zoom between hierarchy levels, while hovering reveals a tooltip showing the word, article count, and relative frequency. The visualization uses d3.pack for circle layout, d3.hierarchy for data traversal, and d3.transition with interpolateZoom for animated zooming. It is rendered in SVG with D3 v5, using a linear color scale for depth-based coloring and event listeners for mouse interactions.

Sep 20, 2023