fresh block

100%

✓ Published0🌍 Public

Last edited Aug 25, 2017

Created on Aug 25, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a hierarchical cluster dendrogram of machine learning research topics, using a tidy tree layout where each leaf node represents a specific topic and branches group related subtopics. The visualization uses `d3.cluster` to position nodes and `d3.stratify` to build the tree structure from CSV data with hierarchical id fields. Curved link paths create the classic dendrogram appearance, with internal nodes labeled on the left and leaf labels on the right. Data comes from a flare.csv file containing nested topic names, rendered as SVG elements with circle markers and text labels.

HHamishWoodrow

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

84% match

Loading thumbnail…

fresh block

This example shows a hierarchical tree of analytical data categories, such as CAR, B2B, and CUSTOMER PROFILE, with branches like RAW and DERIVED leading to detailed attribute names. It renders the structure using SVG circles and links, with d3.v4's tree layout and animated transitions. The data is embedded directly in the source code as a JavaScript object, and node labels use a 10px sans-serif font.

DDAVINDER

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

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

79% match

Loading thumbnail…

flare_trial_2

This interactive tree diagram visualizes a hierarchical dataset of machine learning topics and techniques. Clicking on a node with children collapses or expands that subtree, with animated transitions smoothing the layout changes. The visualization is built with D3.js v3, using the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute and draw the node-link structure. Data is loaded from a JSON file, and nodes include external URLs that open in new windows when clicked. The SVG rendering uses red circles for parent nodes and white for leaf nodes.

HHamishWoodrow

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

76% match

Loading thumbnail…

fresh block

This example demonstrates an interactive force-directed graph of a hierarchical dataset, where nodes represent data points and links show parent-child relationships. The visualization uses D3.js version 3.5.5 with a force layout to position nodes, while a semantic zoom behavior (via `d3.behavior.zoom`) allows panning and scaling the entire graph. Nodes are colored by group or hierarchy level, with the root node highlighted in white, and can be dragged individually using `d3.behavior.drag`. The code applies linear scales for coordinate transformation during zoom and dynamically updates node positions and link lines on each tick event, with the data sourced from a Gist and rendered as an SVG.

DDinoJay

76% match