Dendrogram

100%

Dendrogram - Java8 API (subset)

✓ Published0🌍 Public

Last edited Jul 6, 2018

Created on Jul 6, 2018

This dendrogram visualizes a subset of the Java 8 API, showing the hierarchical package and class structure from the `java`, `java.math`, and `java.sql` packages. The D3 v4 `d3.cluster` layout arranges the nodes, while `d3.stratify` converts the CSV data into a hierarchy based on the dotted identifiers in the `java8.csv` file. Nodes and connecting links are rendered as SVG elements, with internal nodes highlighted in darker gray and leaf nodes in lighter gray.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Tree Demo

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.

TThanaporn-sk

75% match

Loading thumbnail…

This dendrogram visualizes a hierarchical clustering of the Flare data set, showing the nested structure of its analytics, animation, and visualization classes. Internal nodes are rendered as small circles, with connecting links drawn as smoothed curves, while leaf nodes display labels. The example uses D3 v4 and SVG rendering, employing the `d3.cluster` and `d3.stratify` layouts to position nodes based on their hierarchical depth and computed height. Data is loaded from a CSV file, and the chart’s orientation places the root at the left, expanding rightward.

Mmbostock

74% match

Loading thumbnail…

D3 Stratify tree diagram

This example shows a hierarchical family tree rendered as a dendrogram, with nodes labeled by name and curved links connecting parents to children. The data is embedded as a CSV string and parsed with `d3.csvParse`, then converted into a hierarchy using `d3.stratify`. The layout is computed with the `d3.cluster` tree layout, and links are drawn as SVG paths using a custom `project` function that maps tree coordinates to screen positions. Text labels use varying font sizes based on node depth.

NNita

73% match

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

73% match

Loading thumbnail…

Gist aab86eb5543eee75b540e8e173212007

This dendrogram visualization displays the Flare class hierarchy as a node-link tree diagram, with all leaf nodes aligned along the right edge and internal package nodes branching to the left. The example uses the classic Flare dataset (courtesy Jeff Heer) and employs D3's tree layout with SVG rendering. Leaf nodes are positioned at a uniform depth, creating a clean right-aligned column of class names, while curved links connect them to their parent packages. This layout makes it easy to compare hierarchical depth across different branches at a glance. The visualization is implemented with D3 v3 and uses the standard dendrogram layout algorithm.

AAdlopez2016

73% match

Loading thumbnail…

Cluster Dendrogram

This cluster dendrogram shows the hierarchical structure of the Flare class hierarchy, with leaf nodes aligned along the right edge and internal package nodes branching to the left. The layout uses `d3.cluster()` to position nodes by tree depth, while `d3.stratify()` converts the flat CSV data (flare.csv) into a hierarchical structure. Node-link paths are drawn as cubic Bézier curves, and each node is rendered as a circle with a text label. The visualization is built with D3 v4, renders to SVG, and uses the `d3.csv` loader to ingest the dataset.

Mmbostock

73% match

Loading thumbnail…

D3 + Vue.js

This interactive cluster dendrogram visualizes hierarchical data from a CSV file using D3 v4 (via `d3.stratify`) and Vue.js 2.2.4, rendering nodes and links as SVG elements. Vue’s template syntax replaces D3’s `enter`/`exit`/`update` pattern, with computed properties managing the tree layout and transitions. The interface includes controls for chart width, stroke color, and text search, plus a button to add nodes.

663anp3ca

72% match