Interactive D3 view of sklearn decision tree

100%

Interactive D3 view of sklearn decision tree

✓ Published0🌍 Public

Last edited Aug 4, 2018

Created on Aug 4, 2018

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.

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>

forked from <a href='http://bl.ocks.org/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/f11624fe14195cf8a1c5'>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 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.

MMNoichl

88% match

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset of alcoholic beverages and their subcategories, with nodes representing items like Wine, Whisky, and specific products, color-coded based on their type. The visualization uses the D3.js library, specifically `d3.layout.tree` and `d3.svg.diagonal`, to compute and render nodes and links. SVG elements are transitioned over 1000 milliseconds as new nodes expand from the root, with each node’s fill color reflecting its category. The dataset is defined in ES6 format, and D3 is loaded via a CDN, demonstrating a dynamic, animated exploration of the drink hierarchy.

SSharankumar02

78% match

Loading thumbnail…

Tree Example

This interactive decision tree visualizes a CEO’s product-choice options with expandable and collapsible nodes. The tree renders as an SVG using d3.layout.tree and d3.svg.diagonal for curved links, with node clicks toggling child visibility via a 750ms transition. Data is embedded as a JavaScript object with named children, including probability labels and monetary outcomes. Each node is a circle with text, styled via CSS classes, and updating uses d3’s data join to animate entering and exiting branches.

PPooky2011

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

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

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

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

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

69% match