Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Circle-Packing

✓ Published0🌍 Public
HHAORAN CHEN
Last edited May 12, 2021
Created on May 9, 2021

This interactive circle-packing visualization displays the hierarchical structure of Fudan University’s graduate programs, organized by school and research direction. The D3 v5 code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.pack` for circle layout, and a sequential magma color scale to indicate depth. Hovering highlights ancestor nodes, while leaf circles include clipped text labels. Rendering is done via SVG, with data loaded from `flare.csv`.

AI-generated description

Mike Bostock's Circle-Packing example

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Circle-Packing

This D3 v5 circle-packing visualization displays the hierarchical structure of the Flare software system, using circle size to represent the number of metrics for each module. The graph is built from a CSV file using `d3.stratify()` and `d3.pack()`, with node depth encoded through the `d3.scaleSequential(d3.interpolateMagma)` color scale. Circles are rendered as SVG elements, with clip paths and tspan text for leaf labels, while hovering highlights the ancestor chain via the `node--hover` class.

LLouis Astorg
84% match
Loading thumbnail…

D3 v5 Circle-Packing

This visualization uses a circle-packing layout to display the hierarchical structure of the Flare software project’s classes and packages, with circle size encoding the value of each node. The example is implemented with D3 v5 and renders as SVG, using `d3.stratify` to build the hierarchy from a CSV file and `d3.pack` to compute the nested circle positions. Circle colors are mapped by depth using a sequential magma scale, and interactive mouseover highlighting is applied through class toggling.

Ppuinnovative
83% match
Loading thumbnail…

Fork of D3 v5 Circle-Packing Testing

This visualization shows a circle-packing layout of the Flare software package’s class hierarchy, using nested circles to represent the data’s hierarchical structure. The code loads data from `flare.csv` with `d3.csv`, processes it with `d3.stratify`, and computes the layout using `d3.pack`. Circles are colored by depth using `d3.scaleSequential` with the magma interpolator, and the visualization is rendered as SVG. Hovering highlights a node’s ancestors by toggling a `node--hover` class.

EEric Zimmerman
83% 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
83% match
Loading thumbnail…

D3 v5 Circle-Packing

This example implements a circle-packing visualization using D3 v5, displaying a hierarchical dataset from the Flare library. The diagram shows a nested arrangement of circles, where each circle represents a data node, with its size proportional to a value and color indicating depth in the hierarchy. Built with D3’s `d3.stratify` and `d3.pack` APIs, it renders to SVG, applying a sequential magma color scale. Interactive mouseover highlights ancestor nodes, while leaf labels are clipped via `clipPath`, and tooltips show the node ID and value.

JJaloYang
81% match
Loading thumbnail…

Fork of Fork of Fork of Fork of D3 Starter

This example displays a university department hierarchy as a vertical tree diagram, using circles for nodes and labeled edges to show parent-child relationships. It loads CSV data from a GitHub Gist via `d3.csv`, then applies `d3.stratify` to build a hierarchical root and `d3.tree` to compute the layout. The SVG output draws curved links with `path` elements and positions nodes and labels based on computed coordinates, with all styling handled through CSS. The tree’s structure is immediately visible, with text placed left or right of nodes depending on whether they have children.

Yyazneshpara2@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of D3 Starter

This example shows a hierarchical tree of a university department structure, with colored nodes connected by curved links. The layout is computed using D3’s `d3.stratify` and `d3.tree` APIs, which organize the data into parent-child relationships and positions nodes in a tidy tree. Node positions are rendered as SVG circle and text elements, while links are drawn as cubic Bézier paths using template literals. Data is loaded remotely from a CSV file via `d3.csv`, and all rendering uses the D3 v7 library.

Yyazneshpara2@gmail.com
79% match
Loading thumbnail…

D3 v5 Circle-Packing

This circle-packing diagram visualizes the hierarchical structure of the Flare dataset, with nested circles representing categories and subcategories. Circle size encodes the summed value of each node. The visualization uses D3 v5’s `d3.stratify` and `d3.pack` to compute the layout, and `d3.scaleSequential` with `d3.interpolateMagma` to color circles by depth. Hovering highlights a node’s ancestors using the `d3.selectAll` and class toggling. SVG renders all elements, with leaf labels clipped via `clipPath`.

Ttasqon
79% match