Random Forest Visualisation

100%

Random Forest Visualisation

✓ Published0🌍 Public

Last edited Jun 6, 2023

Created on Jun 6, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Arbre_Axe_Accuracy

This visualization displays multiple decision trees as a forest of color-coded hierarchical diagrams, with each tree’s accuracy represented by node color: red for high accuracy, blue for medium, and gray for low. The d3.tree layout positions nodes in a branching structure, while the scrollable SVG container allows horizontal navigation across the full set of trees. Using D3 v5, the code generates hierarchical layouts from raw data, calculates bounding circles for each tree, and applies interactive toggling to highlight nodes sharing identical names across different trees, enhancing structural comparison.

Hhoriayeb

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

78% match

Loading thumbnail…

Arbres Triés

A ranked forest of decision trees visualizes model accuracy through color-coded root nodes, with red, blue, and gray indicating high, medium, and low performance. Users click any node to highlight all matching feature names across the four trees in yellow. The example uses D3 v5’s `d3.cluster()` layout to arrange each hierarchy radially, while SVG circles and CSS classes manage the interactive styling and tooltip display.

Zzeyneb.mhamedi@gmail.com

77% match

Loading thumbnail…

Fork of Fork of Arbre_Axe_Accuracy

This example displays a forest of six decision trees, each with an associated accuracy score that determines the color of its nodes (red, blue, or gray). The trees are positioned side-by-side and can be scrolled horizontally within a container. Using the D3 v5 `d3.tree()` layout, the code recursively processes the nested data to generate hierarchical SVG node-link diagrams, applying custom color classes based on accuracy thresholds. The visualization includes animation capabilities and tooltip interactions through the SVG rendering, with the `d3.hierarchy()` API used to structure the raw data before layout computation.

SSubhendu Karmakar

77% match

Loading thumbnail…

Fork of Arbre_Axe_Accuracy

This visualization displays a forest of hierarchical decision trees, each representing a model with an associated accuracy score. The trees are color-coded by accuracy—red for high (≥0.8), blue for medium (≥0.6), and gray for low—allowing viewers to compare structural complexity and performance across models. The code uses D3 v5’s `d3.tree` layout to compute node positions, with the SVG rendered and animated via D3’s selection and transition methods. Multiple trees are placed horizontally within a scrollable container, and interactions highlight nodes sharing the same name across different trees.

DDing

76% match

Loading thumbnail…

Arbre_Axe_Accuracy

This visualization displays a forest of decision trees, arranged in a horizontal strip, with each tree colored according to its accuracy metric. The trees are rendered as hierarchical node-link diagrams using the `d3.tree` layout, and nodes change color to yellow when toggled. The code uses D3 v5 to import data, apply the tree layout, and generate SVG elements with animation, specifically leveraging `d3.hierarchy` to structure the data and a custom `getColorByAccuracy` function for fill colors. Links and nodes are drawn with SVG paths and circles.

Zzeyneb.mhamedi@gmail.com

76% match

Loading thumbnail…

Arbre_Groupes_Accuracy_Triés

This visualization displays a forest of decision trees grouped and sorted by their accuracy scores. Each tree is rendered hierarchically using the D3 tree layout, with node colors (red, blue, or gray) indicating high, medium, or low accuracy. The trees are positioned along a horizontal accuracy scale, and an interactive dropdown allows filtering by accuracy group or specific feature. D3’s hierarchical layout and SVG rendering display the tree structures, with a legend and tooltip providing additional context.

Zzeyneb.mhamedi@gmail.com

75% match

Loading thumbnail…

Arbre_Groupe_Accuracy

This visualization displays a forest of decision trees, each with an associated accuracy score. Trees are arranged along the horizontal axis based on their accuracy, placing high-accuracy trees on the left and lower-accuracy trees on the right. The node colors (red, blue, gray) correspond to accuracy thresholds, and clicking a node highlights all nodes with the same name across the different trees. The visualization uses D3.js's `d3.tree` and `d3.hierarchy` to lay out each tree, and it leverages SVG for rendering, with an interaction that toggles a CSS class on matching nodes. The data is imported from a local ES6 module and displayed in a horizontally scrollable container.

Zzeyneb.mhamedi@gmail.com

74% match