Interactive tree learning playground

Decision tree visualization

Grow a decision tree in your browser and connect every rule to the region it creates. Tune depth, split constraints, criterion, and noise, then add your own observations.

Free to useNo upload or sign-inRuns entirely in your browser
Live decision treePowered by @kanaries/ml
Live model · runs in your browser

Learn DecisionTreeClassifier by changing it

Tune the tree and watch each split carve a new rectangle into feature space. Click the plot to add your own observation and refit instantly.

Tree.DecisionTreeClassifier
Criterion
Growing the interactive tree…
import { Tree } from '@kanaries/ml';

const classifier = new Tree.DecisionTreeClassifier({
  max_depth: 4,
  min_samples_split: 4,
  criterion: 'gini',
  randomState: 42,
});

classifier.fit(X, y);
const predictions = classifier.predict(testX);

What a decision tree classifier does

A decision tree learns a sequence of if/else rules from labeled data. At each internal node it chooses a feature and threshold that make the child groups purer than the parent. A sample travels left or right according to the rule until it reaches a leaf, where the stored majority class becomes the prediction. The result is nonlinear but remains readable as a hierarchy.

Trees are useful when feature interactions matter, relationships contain thresholds, and stakeholders need an explanation closer to business rules than coefficients. They require little distributional modeling and do not need standardized numeric scales. Common applications include eligibility logic, risk triage, churn signals, quality control, and interpretable baselines for tabular classification.

Use the interactive decision tree visualization

The left chart shows predictions across two-dimensional feature space. Each rectangular color region is produced by axis-aligned splits. The right diagram exposes the fitted nodes. Change the dataset, maximum depth, minimum samples, noise, or impurity criterion and both views refit with Tree.DecisionTreeClassifier from @kanaries/ml.

Click inside the surface to add a sample from the selected class. Training and holdout accuracy update independently, which makes overfitting visible. If training accuracy rises while holdout accuracy falls, the extra rules are fitting peculiarities of the sample rather than a reusable relationship. Everything is calculated in the browser without a Python service.

How to read a tree diagram

Begin at the root. A rule such as feature 1 ≤ 0.42 sends matching observations to the left child and the rest to the right. Repeat until a leaf displays a class. Early nodes affect many samples and usually describe the broadest separation; later nodes refine smaller subgroups. A path from root to leaf can be translated into a conjunction of rules for an individual prediction.

The surface provides a complementary interpretation. Every vertical boundary comes from a split on the horizontal feature, and every horizontal boundary comes from a split on the vertical feature. More levels create smaller rectangles. Curved patterns such as moons therefore require a staircase of regions, revealing both the flexibility and inefficiency of axis-aligned trees.

Depth, minimum samples, and overfitting

Maximum depth is the most visible complexity control. A depth-one stump makes one split. Increasing depth allows interactions and local corrections, but an unrestricted tree can create leaves for isolated observations. Minimum samples per split prevents small nodes from dividing further. Leaf-size constraints and pruning serve related purposes in other implementations.

Choose these settings with cross-validation or a representative holdout set. Accuracy is not enough for imbalanced problems; review per-class recall, precision, a confusion matrix, and the operational cost of mistakes. The playground’s holdout metric is a teaching signal, while a production evaluation should preserve time, user, or group boundaries found in the real application.

Gini impurity versus entropy

Gini impurity is one minus the sum of squared class proportions. Entropy is the negative sum of each proportion times its logarithm. Both equal zero for a pure node and increase as classes mix. The algorithm evaluates candidate thresholds and prefers the split with the largest impurity reduction, weighted by child size.

The criteria often produce similar trees, although entropy may react slightly differently near small class proportions. Treat the choice as a hyperparameter rather than a philosophical commitment. Dataset quality, leakage prevention, depth, and minimum-sample settings usually influence generalization more strongly.

How to visualize sklearn and JavaScript trees

Scikit-learn users commonly call plot_tree for a Matplotlib figure or export_graphviz for Graphviz. Those functions draw the fitted Python estimator. In JavaScript, this page renders the node structure exposed by @kanaries/ml and simultaneously evaluates a prediction grid, making it suitable for interactive browser lessons and product explainability views.

The code tabs show parallel fitting workflows. The important comparison is semantic: identical preprocessing, split constraints, criterion, and validation design. Exact structures can differ when thresholds tie or implementations apply deterministic tie breaking differently. Compare predictions and metrics on fixed samples rather than assuming node identities must match.

A responsible deployment workflow

Define features available at decision time, split data before tuning, and check for leakage. Fit several depth and minimum-sample candidates, select with relevant validation metrics, then inspect paths for implausible shortcuts. Trees can encode sensitive proxies and sharp threshold discontinuities, so explanation does not automatically imply fairness or causality.

Test boundary cases on both sides of important thresholds. A tiny measurement change can send two otherwise similar people to different leaves, so verify that precision, rounding, missing-value handling, and upstream units remain consistent. Record the model version and the complete decision path when predictions affect support, risk, or eligibility. That trace helps distinguish a model rule from a feature-pipeline problem and gives reviewers concrete evidence to challenge.

Monitor feature ranges, leaf traffic, and outcome quality after release. New observations outside training ranges still reach a leaf, but that does not make the extrapolation reliable. Read the Decision Tree JavaScript API, compare variance reduction in the Random Forest playground, or contrast local voting in the KNN visualization.

Frequently asked questions

Questions about decision tree visualization

How do I visualize a decision tree?

Fit the estimator, inspect its root and child nodes, and draw each split as a node connected to its children. The playground also plots the classifier’s predictions across feature space so rules and geometric regions can be read together.

How can I visualize a scikit-learn decision tree?

In Python, use sklearn.tree.plot_tree for Matplotlib output or export_graphviz for Graphviz. The JavaScript page shows the corresponding @kanaries/ml workflow and renders the live tree directly in the browser.

What does max depth do?

Max depth limits how many split levels a tree can grow. Shallow trees are easier to explain and often generalize better; deep trees can capture fine interactions but may memorize noise.

What is the difference between Gini and entropy?

Both measure node impurity. Gini uses squared class proportions, while entropy uses information content. They often choose similar splits, so depth and minimum-sample constraints usually have a larger practical effect.

Is the visualization using a real model?

Yes. The boundary, holdout score, and exposed tree structure come from Tree.DecisionTreeClassifier in @kanaries/ml, fitted locally whenever a control or observation changes.

Powered by @kanaries/ml — the scikit-learn-style ML library for JavaScriptnpmGitHub