qdtree

100%

✓ Published0🌍 Public

Last edited Feb 8, 2023

Created on Feb 8, 2023

This visualization displays a query decision tree as a hierarchical node-link diagram. The tree structure is derived from a JSON file containing predicates, query counts, and row counts. Internal nodes show their branching predicate, while leaf nodes display their row and query statistics. The layout is computed using d3.cluster, with links drawn as horizontal paths. Node sizes are proportional to row counts, and colors indicate query performance relative to a baseline. Circles are styled with strokes to show whether data is cached, and the entire view supports zooming via d3.zoom.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

q

An interactive family tree rendered as a hierarchical node-link diagram with collapsible branches and animated transitions. Built with React and D3 v3, the visualization loads hierarchical JSON data and displays color-coded nodes based on type, with red links and pink arrows connecting family members. Clicking a node toggles its children, and the tree supports zoom and drag via d3.behavior.zoom. Rectangular SVG nodes include tooltips, while the layout dynamically adjusts its dimensions to fit the data's depth and breadth.

Ppreethamkesa

74% match

Loading thumbnail…

Tree

A horizontal tree diagram visualizes hierarchical data with color-coded nodes representing question-answering states. Users toggle node expansion by clicking, with smooth transitions animating node positions and link paths. The visualization uses D3 v5's `tree` layout, `hierarchy` function, and `linkHorizontal` generator to compute the layout, while SVG elements and `transition` handle the rendering and animation. Interactive zooming is supported through the `zoom` API. The dataset comes from a static JavaScript object defining a tree structure with visit, attempt, and correctness classifications.

AAkrutiKhurana2103

73% match

Loading thumbnail…

Tree

This interactive tree diagram displays a hierarchical decision flow for faced questions, with nodes representing statuses like "Visit," "Attempted," "Correct," and "Incorrect." Users click any node to collapse or expand its children, triggering smooth animated transitions. The visualization uses D3 v5's `tree` and `hierarchy` layouts alongside `linkHorizontal` for curved edges, with SVG rendering and zoom/pan support via `d3.zoom`. Node colors and labels are driven by embedded JSON data, and transitions are handled through D3’s `.transition()` methods with configurable durations.

AAkrutiKhurana2103

72% match

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi

72% match

Loading thumbnail…

ice8 -Tree

This interactive tree diagram visualizes a hierarchical dataset, with nodes representing names and animated connections showing parent-child relationships. Clicking a node toggles the expansion or collapse of its children, smoothly transitioning the layout. Built with d3.layout.tree, it uses d3.svg.diagonal for curved links and d3.json to load the external qn_tree.json file. The SVG rendering includes a fixed-depth normalization, orange node strokes, and semi-transparent links, with all nodes positioned based on their depth in the hierarchy.

SSaivignesh-9176

71% match

Loading thumbnail…

Tumor Treatment Decision Tree

A clinical tumor-treatment decision tree displays the hierarchical logic paths from a tumor diagnosis to the recommended treatment protocol. The visualization guides viewers through a branching structure of diagnostic criteria, such as whether neurosurgery is performed and if tumor markers are positive, ultimately leading to action nodes indicating specific clinical protocols. The D3.js v5 code implements a tidy tree layout with horizontal links, computing the hierarchy from a JSON file. It renders interactive elements using SVG primitives, including rects for decision boxes and paths for connecting lines, with a custom zoom feature.

SSedithesa

71% match

Loading thumbnail…

Q7

The visualization displays a family tree using a structured diagram, where each node represents a family member and connections show parent-child relationships. The tree branches from a central root, with circles indicating individuals and labels showing their names. Built with D3 v6, the code uses `d3.stratify()` for hierarchical data processing and `d3.tree()` for layout. Nodes transition via `.transition()` with varying durations, and SVG paths animate from the parent position to the child position. The data is hardcoded, and links are rendered as blue strokes while circles use a salmon fill.

AArun Pratap

70% match

Loading thumbnail…

Tree Diagram

This interactive tree diagram displays hierarchical animal classification data from a JSON file, with nodes that collapse and expand on click. Built with D3 v3, it uses the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links, with SVG rendering and animated transitions between states via `transition.attr`. Node styling includes green circles and comic sans labels, while purple links highlight parent-child relationships.

SSai Kaushik

70% match