Pooky2011

@Pooky2011·5 public vizzes

Tree Traversals

This interactive visualization demonstrates depth-first and breadth-first tree traversal algorithms on a small dummy dataset. Two buttons trigger the respective traversals, animating each visited node by coloring it red in sequence, while a reset button restores the original white and steel-blue styling. The tree is rendered as a static D3 dendrogram using `d3.layout.tree`, with nodes and links drawn as SVG circles and lines. The animations are driven by chained `transition().style()` calls with incremental delays, and the traversal logic itself relies on basic JavaScript array operations—a stack for depth-first and a queue for breadth-first.

Feb 21, 2017

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.

Feb 21, 2017

Loading thumbnail…

Random Tree

This example shows a random tree growing incrementally as new nodes are added to random parent positions, with smooth animated transitions recalculating the layout via the Reingold-Tilford "tidy" algorithm as implemented by d3.layout.tree. Each new node enters from its parent’s previous position, while existing nodes and links animate to their updated coordinates. The visualization uses an SVG rendering with d3.svg.diagonal for edges and d3 transitions (transition.attr) over a 750ms duration, stopping once 500 nodes are present. The code relies on d3.v3 and the d3.layout.tree API to compute tree positions.

Feb 21, 2017

Loading thumbnail…

Search Collapsible Tree

This interactive visualization extends a collapsible tree diagram with a search feature. It displays a hierarchical dataset (flare.json) as an animated, SVG-based tree that users can expand and collapse by clicking nodes. A Select2 search box at the top allows users to type a leaf node’s name, which automatically expands the tree to reveal that node and highlights the entire path to it in red. Built with D3.js and jQuery, the tree uses a fixed-depth layout and diagonal links, with node expansion and collapse animations.

Feb 21, 2017

Loading thumbnail…

Blocks Graph VI

A force-directed graph of d3.js blocks, where each node represents a block and links show connections between them. Nodes are colored by author, and hovering over a node displays that block's thumbnail image in a tooltip. The visualization uses d3.forceSimulation for layout and renders to a Canvas element via its 2D context. Dragging nodes is supported through d3.drag, and block data is loaded from a JSON file.

Feb 20, 2017