Boyka

@BoykaZhu·7 public vizzes

D3 collapsable multiple parents tree

This example visualizes plant generation data and a custom tree structure using D3.js version 3’s `d3.layout.tree`, `d3.svg.diagonal`, and SVG rendering with animated transitions. It shows hierarchical relationships through collapsible nodes, where clicking toggles child visibility, and includes an additional link connecting two non-parent-child nodes via a custom `additionalLinks` array. Nodes are rendered as colored rectangles with text labels, while paths represent parent-child connections. The code computes layout positions based on depth and applies 750-millisecond transitions to smoothly update node and link positions during collapse and expansion.

Jun 16, 2023

Loading thumbnail…

Fork of Collapsible Tree Version 3

This fork of the collapsible tree example displays a hierarchical organizational chart with three top-level departments, each containing management and junior-level roles. D3 v4’s tree layout positions nodes horizontally, with expandable and collapsible branches triggered by clicking circle markers. Node positions animate smoothly via `transition()` over 750 milliseconds, using diagonal path curves for links. The visualization loads role data from a local array, renders as SVG, and distinguishes collapsed nodes with a lightsteelblue fill, while text labels use the `d3.hierarchy` API to manage nesting and depth.

Jun 16, 2023

Loading thumbnail…

Fork of Tree Example: ICE-8

A fork of the D3.js tree example, this visualization displays a family tree for the Reddy lineage, using an animated, collapsible hierarchy. Each node represents a family member, with the node’s fill color determined by its generation level, while parent-child links are drawn as smooth cubic Bézier curves using a diagonal path generator. The code leverages the `d3.layout.tree` API and SVG `circle` and `text` elements to render the structure, with names and parent relationships provided in a hard-coded JavaScript array. Node clicks trigger animations to expand or collapse branches, controlled by the `transition` function.

Jun 16, 2023

Loading thumbnail…

Fork of Fork of Fork of Tree 7

This collapsible tree diagram visualizes a small hierarchical dataset loaded from a JSON file, with nodes labeled by names such as “kamasani” and “lalli.” Users can click any node to expand or collapse its children, triggering smooth animated transitions of both the node positions and the connecting diagonal links. The implementation uses D3 v3’s `d3.layout.tree`, `d3.svg.diagonal`, and SVG transitions with a duration of 1100 milliseconds. Nodes are rendered as green-stroked circles with bold text, and the tree layout spreads vertically by depth, with each level offset by 180 pixels.

Jun 16, 2023

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree visualization displays a hierarchical dataset from data.json, where a root node labeled “Father” branches into seventy identical children named “Joe.” The D3.js v7 code uses `tree()` layout and `linkVertical()` to draw connecting paths, with text labels rotated for leaf nodes. SVG rendering supports interactive zooming via `zoom()`, while font sizes scale dynamically based on sibling count using the imported `scale` API.

May 31, 2023

Loading thumbnail…

Radial Tree of Countries Hierarchy - Test

This example shows a radial tree layout of a hierarchical data structure, adapted from Curran Kelleher’s “World Countries Hierarchy” block. The code uses D3 v4’s `d3.cluster` and `d3.hierarchy` to compute node positions in a circle, then draws curved paths between parent and child nodes. Each node is rendered as an SVG text label, with font size scaled by depth via a `d3.scaleSqrt` transform. Panning and zooming interactions are enabled using D3’s `d3.zoom` behavior, which applies a transform to the SVG group. The data, a repeating set of object names and paths, is loaded from a local `data.json` file.

May 31, 2023

Loading thumbnail…

Fork of World Countries Tree 002

This example shows the hierarchical structure of world countries, organized by continent and subregion, as a vertical tree diagram. The visualization uses a D3 tree layout to compute node positions and renders paths with `d3.linkVertical` for connecting links. Text labels display country names with font sizes scaled by depth. The SVG rendering supports zooming and panning through the `d3.zoom` API. Data is loaded from a local JSON file using `d3.json`, and the code relies on D3 v5's `select`, `tree`, `hierarchy`, and `event` modules.

May 30, 2023