Skip to main content
100%

fresh block

✓ Published0🌍 Public
TTreblesteph
Last edited Dec 1, 2015
Created on Dec 1, 2015

This interactive collapsible tree visualizes the taxonomic hierarchy of the order Coleoptera (beetles), showing suborders, infraorders, superfamilies, and families. The d3.v3 code uses `d3.layout.tree` and `d3.svg.diagonal` to draw the nodes and links, with jQuery handling the expand/collapse interactions. Hovering over a node displays the taxonomy label, and clicking a node toggles its children. The visualization reads hierarchical data from a local `fams_taxonomy.json` file, rendered with white circles and steelblue strokes against a gray background.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

A hierarchical cluster diagram displays the taxonomic classification of beetles, from order through suborders and infraorders down to individual families. The visualization uses a tree layout with curved diagonal links connecting parent and child nodes, each labeled with its taxonomic name and category. The code loads the JSON taxonomy file and renders it using d3.layout.cluster and d3.svg.diagonal in SVG, with circles for nodes and text labels positioned alternately on either side of parent nodes.

TTreblesteph
87% match
Loading thumbnail…

fresh block

A collapsible hierarchical tree diagram displays the structure of analytical customer data records, organized into nested categories such as raw and derived attributes. The visualization uses the D3.js v3 library with its tree layout and diagonal path generator to render SVG nodes and links. Clicking a node toggles its children, animating the expansion and collapse with transitions. The data is loaded from the dendogram.json file.

DDAVINDER
76% match
Loading thumbnail…

fresh block

An interactive red-on-white dendrogram visualizes a hierarchical JSON dataset from `turbo.json`. Clicking a node collapses or expands its children. The tree uses `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Animated transitions via `d3.select(...).transition()` reposition nodes and links when branches open or close. Leaf nodes with URLs render as clickable text anchors.

HHamishWoodrow
76% match
Loading thumbnail…

fresh block

A tree diagram displays hierarchical data with rounded rectangular nodes and connecting curved links, all rendered in a clean white-and-steelblue palette. The visualization uses D3 v4 to generate the layout, with each node labeled by text and positioned via an external vertical_tree.js script. The code loads D3 from a CDN and applies CSS styling to define node fills, strokes, and link thickness. The example demonstrates a static, non-interactive tree structure, relying on D3's core selection and data-join methods rather than force simulation or animation.

JJoseEduinCulmaCaviedes
75% match
Loading thumbnail…

fresh block

A collapsible tree visualization displays a hierarchical document structure, with nodes representing items in an "ETO Document Suite." The visualization uses D3.js v3 to render SVG nodes and links, with collapsible branches and a text input to filter or reset the tree to its root. Animated transitions smooth node expansion and collapse. The tree layout uses `d3.layout.tree` with a diagonal path generator, and the data source is a static array of parent-child pairs. Hover tooltips and custom styling are included, while a fixed logo and header image are embedded via SVG image elements.

FFraserMacMillanGithub
75% match
Loading thumbnail…

Fork of ICE8- Tree

This example visualizes the taxonomic hierarchy of the animal kingdom as an interactive, layered tree diagram. Using D3.js, the visualization shows four distinct depth levels—Kingdom, Phylum, Class, and Order—with each layer encoded by a unique color, from purple at the root to coral at the leaf nodes. The flat parent-child input data is transformed into a hierarchical structure using `d3.stratify()`, with node positions computed by `d3.tree()` and curved edges rendered via `d3.linkVertical()` and an SVG canvas.

Bbrodyoneal10@gmail.com
74% match
Loading thumbnail…

Tree Example

This example shows a collapsible hierarchical tree diagram using D3 v3. Nodes representing a small family dataset appear as white circles with steelblue outlines, connected by curved gray links, and labeled with names. Clicking a node toggles its children, animating the tree’s layout transitions over 750 milliseconds. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and SVG-based rendering, with enter, update, and exit selections to handle dynamic node and link changes.

PPandaRider
73% match
Loading thumbnail…

fresh block

This example shows a hierarchical tree of machine-learning topics as a tidy dendrogram, with internal nodes drawn as dark circles and leaf nodes as lighter ones. Each node displays a label, and the data is loaded from a local CSV file using `d3.csv` and structured with `d3.stratify`. The layout is computed by `d3.cluster`, and the curved links between parent and child nodes are rendered as SVG paths with a custom cubic Bézier curve. Clicking any node opens a new browser window.

HHamishWoodrow
73% match