Matt Morris

@matt-morris·5 public vizzes

General Update Pattern for Nested Items

Animated fruit bowl demonstrates the general update pattern for nested selections in D3. Circles and labels enter, update, and exit as fruits are added, removed, or change type. The code uses `selection.enter()`, `merge()`, and `exit().remove()` with key functions on `d.id`. Transitions via `transition().duration()` animate radius changes, while `scaleOrdinal` maps fruit types to colors and sizes. The example runs scripted `setTimeout` changes to drive the updates.

Feb 7, 2019

Loading thumbnail…

Hello VizHub

This example shows an interactive dendrogram layout of a hierarchical data structure, rendered as SVG circles connected by curved paths. Users can click nodes to inspect them, press Shift-click to add random "florps" children, or Cmd-click to delete entire subtrees, triggering re-renders that change link and node colors. The code relies on d3.hierarchy, d3.cluster, d3.zoom, and the d3 v5 event handling, with data defined as a plain JavaScript object and layout computed at 500x900 pixels.

Feb 7, 2019

Loading thumbnail…

Hello VizHub

An interactive collapsible tree visualization displays the Flare dataset hierarchy, with nodes and links rendered as SVG elements. The graph supports dynamic restructuring through user interactions: shift-clicking appends new child nodes, while alt-clicking triggers name editing. The layout recalculates node positions with smooth transitions using D3 v5's hierarchy layout and transition APIs, including `root.descendants()`, `root.links()`, and `linkHorizontal()`. Node colors shift based on collapsed states, and the `update` function handles enter, update, and exit selections for both nodes and paths.

Feb 6, 2019

Loading thumbnail…

Layout Test

This example demonstrates a hierarchical tree layout rendered as an SVG visualization, with data representing a page structure of components and partials. The tree uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws curved paths between parent and child nodes. The visualization supports pan and zoom through d3.zoom, with the zoom transform applied to a group element containing the rendered tree. A data store module supplies the hierarchical data, and the code includes a typo where circles are appended using the incorrect tag name instead of “circle.”

Feb 6, 2019

Loading thumbnail…

General Update Pattern

A colorful bowl of fruit demonstrates D3's general update pattern using SVG circles and animated transitions. The `fruitBowl` function binds an array of fruit objects to circles, employing `selection.enter`, `selection.merge`, and `selection.exit` to handle additions, updates, and removals. `d3.scaleOrdinal` maps fruit types to fill colors and radius sizes, while `transition` animates positions and sizes. Timers in `index.js` trigger state changes, popping fruits, swapping an apple for a lemon, and removing items, showing how circles gracefully grow, shrink, or disappear over one-second intervals.

Feb 5, 2019