Tree Demo

100%

✓ Published0🌍 Public

Last edited May 3, 2017

Created on May 3, 2017

This circle-packing visualization displays the hierarchy of Java classes and packages from a CSV file, with each circle representing a class and its size corresponding to its value. The color of each circle indicates its depth within the tree, ranging from green at the root to yellow at the deepest levels. Built with D3 v4, the code uses `d3.stratify()` to build the hierarchy, `d3.pack()` for the circle layout, and custom tooltip functions to display class names on hover.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/maelafifi/'>maelafifi</a>'s block: <a href='http://bl.ocks.org/maelafifi/cc81161f10302bfd21b321dea2eb169e'>circlePack</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Tree Demo

This example visualizes the class hierarchy of Java 8 source code as a treemap, with rectangles sized by class size and colored by depth using a sequential `d3.schemeRdYlGn` scale. Hovering over a rectangle displays a tooltip via SVG text. The code uses `d3.csv` to load the data, `d3.stratify` to build the hierarchy, and `d3.treemap` to compute the layout. SVG elements are rendered with D3 v4, and custom helper functions convert polar coordinates and handle tooltip positioning.

TThanaporn-sk

88% match

Loading thumbnail…

Tree Demo

This example demonstrates seven different hierarchical layouts—traditional tree, dendrogram, circular traditional, circular dendrogram, circle packing, treemap, and icicle—using Java class data from a CSV file. Each layout is rendered as a separate SVG, with nodes and links colored by depth using `d3.scaleOrdinal` and the `d3.schemeYlGnBu` color scheme. The code uses `d3.stratify` to convert the flat CSV data into a hierarchy, then applies layout algorithms like `d3.tree`, `d3.cluster`, `d3.pack`, `d3.treemap`, and `d3.partition`. Interactive tooltips appear on mouseover, highlighting the selected node.

TThanaporn-sk

84% match

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

79% match

Loading thumbnail…

Circle packing - java.util API

A circle packing diagram visualizes the hierarchical structure of the Java 8 `java.util` package, with each circle sized by a numeric value. The visualization uses the D3 v4 library and renders to SVG, with a sequential magma color scale encoding the depth of each node. Hovering over a circle highlights all its ancestors. Data is loaded from a CSV file and processed using `d3.stratify` to build the hierarchy, which is then laid out with `d3.pack`. Text labels are clipped to leaf circles.

PPragyagarg

79% match

Loading thumbnail…

Tree diagram from csv using v4

This tree diagram visualizes hierarchical data loaded from a CSV file, displaying nodes as white circles with steel-blue outlines connected by curved gray links. The visualization uses d3.v4's `d3.tree` layout, `d3.stratify` to convert flat parent-child records into a hierarchy, and `d3.hierarchy` to map the structure. Text labels appear beside each node, positioned differently for internal versus leaf nodes. The SVG rendering includes CSS styling for node circles, text shadows, and link strokes, following the D3 Tips and Tricks book example.

Dd3noob

77% match

Loading thumbnail…

simple tree

This visualization shows a small tree diagram with circular nodes connected by vertical paths, displaying hierarchical relationships from a CSV file. The node positions and link paths are computed using d3.stratify and d3.tree APIs, then rendered as SVG paths and circles. Data is loaded from data.csv, which contains id and parent columns, and the layout is controlled by a custom separation function that sets uniform spacing between siblings. The tree is drawn on a 960 by 500 pixel canvas using D3 v4.

RRainboylvx

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

77% match

Loading thumbnail…

Tree diagram from csv using v6

This tree diagram visualizes hierarchical data loaded from a CSV file, with nodes representing names and links showing parent-child relationships. The example uses d3.csv to load the flat data, d3.stratify to convert it into a hierarchy, and d3.tree to compute the layout. Nodes are rendered as circles with labels, while curved paths drawn via SVG path elements connect parents to children. The code also assigns CSS classes based on whether a node is internal or a leaf, adjusting text placement and styling accordingly.

Dd3noob

76% match