Decision Tree III

100%

Decision Tree III

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on Sep 3, 2018

This visualization displays a decision tree of farmers market data, branching through product categories like baked goods, cheese, and vegetables to reveal patterns in market offerings. The tree uses an organic, gooey aesthetic with SVG filters for blur and color matrix effects, while animated nodes and edges grow outward using d3’s tree layout and the `.ancestors()` function to position descendants at ancestor depths. Built with d3.v4 and Vue, it renders in SVG with smooth transitions, sourcing real market attributes from a JSON dataset.

AI-generated description

A visualization of a decision tree with SVG filters to make it look more organic animated to make it seem to grow in a similarly organic fashion.

The animation is facilitated by taking advantage of the .ancestors() function attached to every node generated by d3's tree layout. By getting an array of ancestors and filtering it to the ancestor at a specified depth (as seen in the ancestorAtDepth function) you can easily set a descendent node's position to any ancestor position.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/71f1f45fce636654d4b9e1b5c469db6f'>Decision tree III</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 + Vue.js

This interactive cluster dendrogram visualizes hierarchical data from a CSV file using D3 v4 (via `d3.stratify`) and Vue.js 2.2.4, rendering nodes and links as SVG elements. Vue’s template syntax replaces D3’s `enter`/`exit`/`update` pattern, with computed properties managing the tree layout and transitions. The interface includes controls for chart width, stroke color, and text search, plus a button to add nodes.

663anp3ca

74% match

Loading thumbnail…

D3 + Vue.js

This example demonstrates an interactive cluster dendrogram visualization built with D3.js v4 and Vue.js 2.2, rendered as SVG. It displays a hierarchical tree structure of the Flare dataset loaded from a CSV file, with nodes representing categories and connections drawn as paths. The chart includes user controls for adjusting width, stroke color, and searching nodes, while also supporting node selection and dynamic addition. Vue’s template syntax binds SVG attributes to computed properties, replacing traditional D3 enter/exit/update methods with reactive data-driven rendering.

663anp3ca

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

73% match

Loading thumbnail…

My - Tree 2

This visualization displays a hierarchical network of production relationships from a farming game’s building.csv dataset. Nodes represent ingredients and products, while links connect each product to its required resources. Using d3.forceSimulation with SVG rendering, the code constructs a directed graph where paths show dependency chains from basic ingredients like wheat and eggs up to finished goods. The layout leverages force-directed physics to organically position interconnected nodes, with curved links and labeled text styled by Playfair Display. D3 v5’s csv parsing and lodash support the data transformation into node-link structures.

TTMorgan99

73% match

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

72% match

Loading thumbnail…

Tree

A vertical tree diagram displays three levels of food categories, from the root "Food" down to fruits, vegetables, dairy, and their individual items. The SVG visualization uses D3 v7's `d3.stratify` and `d3.tree` layouts, reading hierarchical data from a local `food_tree.json` file. Node circles are colored by depth using a `d3.scaleOrdinal` with blue, orange, and green, while `d3.linkVertical` draws the connecting paths between parent and child nodes.

AArun Kumar M

72% match

Loading thumbnail…

Visualizing tree

This visualization shows a five-level hierarchical crop tree, from the root “Plants” down to specific crop leaves, using color-coded shapes to indicate depth. The D3.js v7 code builds an SVG with nodes and links, and includes interactive buttons to expand, collapse, and fit the tree to the view. Clicking on nodes toggles their children, while a legend and tooltip clarify the level colors. The layout and rendering rely on the SVG element, with no external simulation or layout algorithms visible in the provided code.

Mmaddineni2112@gmail.com

72% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays the hierarchical structure of a dataset, with nodes and links rendered using SVG and animated transitions. The visualization uses D3.js version 3, with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Clicking nodes expands or collapses their children, with smooth transitions achieved through `transition.attr`. The static data is embedded in the code, and the example also includes a separate CSV file for population data, though it is not referenced in the visualization.

1123ATFake

71% match