Hierarchical Word Clustering

100%

Hierarchical Word Clustering

✓ Published1🌍 Public

Last edited Apr 6, 2023

Created on Mar 27, 2023

This hierarchical word clustering visualization uses a circular packing layout to display the frequency of words from news articles about crime. The d3.pack layout positions circles by data size, with color encoding depth in the hierarchy. Clicking a circle triggers a smooth zoom transition to focus on that cluster, while hovering reveals a tooltip showing the word, article count, and frequency relative to its parent. The visualization renders with SVG and animation, loading data from a local JSON file.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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.

VValentin Edelsbrunner

90% match

Loading thumbnail…

Fork of World Countries Hierarchy

This radial dendrogram visualizes a hierarchical dataset of crime-related terms, with three main branches: theft, assault, and drugs. The visualization uses a circular tree layout, placing the root at the center and spreading descendant labels outward along angular coordinates. The code employs D3 version 5 APIs including `d3.cluster`, `d3.hierarchy`, and `d3.linkRadial` to compute the layout and generate curved link paths. Text labels are rotated to align with their radial positions, and font sizes scale with tree depth via `d3.scaleSqrt`. The SVG rendering positions leaf labels with adjusted anchors, and the view supports interactive zooming through `d3.zoom`. The data comes from the local `data.json` file, which contains nested crime word frequencies.

Eericliu6178@gmail.com

73% match

Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent

71% match

Loading thumbnail…

Circle Packing

This visualization displays a hierarchical dataset as nested circles, using area to represent the number of descendants in each node. Color distinguishes between constrained and unconstrained nodes, with constrained items shown in gray and unconstrained ones in blue. The layout is computed using D3’s `pack` algorithm, which positions circles within a viewport sized to the browser window. Data is loaded from `data.json` via D3’s `json` function, then processed with `hierarchy` and rendered as SVG `<circle>` elements, with white strokes providing visual separation between adjacent circles.

CCalvin Gomez

71% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

70% match

Loading thumbnail…

circle packing D3 Version 05

A hierarchical circle packing visualization maps an audio effects library into nested bubbles, with root nodes representing sound categories (Clap, Gunshot, MetalHit) and child nodes encoding individual waveform layers. The D3 v5 layout uses `d3.hierarchy` and `d3.pack` to compute circle positions, while `d3.forceSimulation` applies force-directed scattering to separate clusters. SVG circles render with partial opacity, and hovering highlights nodes red through CSS transitions. The code reads from an embedded `soundData` JSON structure, assigning each leaf a proportional area based on its `value` attribute, with the visualization updating dynamically as the simulation settles.

JJaloYang

70% match

Loading thumbnail…

Final Circle Packing

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

QQuinn Sebso

70% match

Loading thumbnail…

D3 v5 Circle-Packing

This visualization shows a hierarchical dataset as nested circles, with each circle’s size encoding a numeric value and its color representing depth in the tree. Built with D3 v5 and rendered as SVG, it uses `d3.stratify` to convert the tabular flare.csv data into a hierarchy, `d3.pack` for layout, and `d3.scaleSequential` with `d3.interpolateMagma` for coloring. Hovering highlights a node and its ancestors via the `mouseover` and `mouseout` events.

DDylan

70% match