Interactive D3 view of sklearn decision tree

100%

Interactive D3 view of sklearn decision tree

✓ Published0🌍 Public

Last edited Aug 3, 2018

Created on Aug 3, 2018

This interactive visualization displays the decision rules of a scikit-learn decision tree as a collapsible Reingold-Tilford tree. Users click nodes to expand or collapse branches, revealing classification outcomes for a dataset with products like bread and cognac. Built with D3 v3, it uses `d3.layout.tree` for layout, `d3.svg.diagonal` for curved links, and `d3.json` to load the tree structure. Node positions transition smoothly via `node.transition().duration(750)`, with collapsed children stored in `_children`. The SVG rendering uses white and light-steelblue circles to indicate leaf versus internal nodes.

AI-generated description

This is Bostock's interactive Reingold-Tilford Tree with data representing the rules of a simple sklearn decision tree. Click on nodes to expand or collapse.

For more, see the complete write-up.

forked from <a href='http://bl.ocks.org/ajschumacher/'>ajschumacher</a>'s block: <a href='http://bl.ocks.org/ajschumacher/65eda1df2b0dd2cf616f'>Interactive D3 view of sklearn decision tree</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Interactive D3 view of sklearn decision tree

This interactive visualization displays a decision tree trained on cocktail recipe data, showing the ingredient-based rules that classify drinks. Each node represents a threshold test on an ingredient quantity, with leaf nodes listing predicted cocktail categories. Users can click nodes to expand or collapse branches, revealing the tree’s hierarchical structure. The code uses D3.js v3 with its `d3.layout.tree` for the Reingold-Tilford layout and `d3.svg.diagonal` for curved links, rendering nodes as SVG circles and text with smooth animated transitions between states.

MMNoichl

88% match

Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes hierarchical data from the flare library using a Reingold–Tilford layout. Nodes represent categories and leaves represent individual modules, with circle marks sized by a numeric value and colored by depth. Clicking a node expands or collapses its children with a smooth animated transition, implemented in D3 v3 with SVG rendering. The layout updates the tree’s horizontal positioning to reflect the current set of visible nodes, keeping the visualization tidy and readable.

663anp3ca

74% match

Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes hierarchical data from a Santander bank dataset, rendered as an animated SVG using D3.js. It adapts the classic Reingold–Tilford tree layout: nodes are circles, links are curved paths, and clicking a node expands or collapses its children with smooth transitions. The dataset, stored in a JSON structure, groups items under category names like "analytics" and "physics," with leaf nodes sized by a numeric value. The visualization supports progressive disclosure, letting viewers explore the hierarchy by toggling branches while maintaining a clear left-to-right layout.

AAdlopez2016

74% match

Loading thumbnail…

Random Forest Visualisation

This interactive visualization displays a random forest of decision trees trained on the Iris dataset, with each tree represented as a collapsible, animated dendrogram rendered in SVG. Accuracy levels for each tree are color-coded (red for high, blue for medium, gray for low) via CSS classes, with tooltips on hover. Users can filter trees by attribute or accuracy group using linked dropdown menus. The implementation uses D3.js v5 to parse the hierarchical JSON and construct the tree layouts, with click-to-toggle node expansion and a custom scrollable container for the horizontal forest view.

TTimothyMiage

74% match

Loading thumbnail…

Untitled

This is an interactive, animated tree diagram that visualizes a classification decision path, starting from a root node labeled "Root" and branching through binary decisions on features (e.g., "feature 434 <= 0.0") to leaf nodes that predict a class of 0.0 or 1.0. The visualization, built with D3.js (version 3.5.16), uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to position and draw the hierarchical links, with nodes that can be clicked to expand or collapse their children. The data is loaded from a JSON file (`structure.json`), and the entire scene supports smooth transitions over 750 milliseconds.

Aamorenos25

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

73% match

Loading thumbnail…

Untitled

This interactive tree diagram visualizes a decision tree for classifying Iris flowers based on petal measurements. It shows hierarchical split rules and resulting class distributions at leaf nodes. The visualization uses D3.js v4 with SVG rendering and animated transitions, implementing a collapsible tree layout where nodes can be clicked to expand or collapse branches. The code employs `d3.hierarchy`, custom transition methods, and a durational animation to smoothly reposition nodes and links when the tree state changes.

JJoker-tr

73% match

Loading thumbnail…

Interactive Tree Updated

This interactive tree diagram visualizes a hierarchical decision-making process, where each node represents a stage from "Faced Questions" down to outcomes like "Correct" or "Incorrect." Clicking a node expands or collapses its children, using the D3.js `tree` layout and `linkHorizontal` generator for the animated SVG paths. The code relies on D3 v5's `hierarchy`, `zoom`, and `event` APIs, with transitions animating node positions and opacity changes for entering and exiting elements.

Ccsroysudarshan

72% match