ICE_8 Family_Tree

100%

ICE_8 Family_Tree

✓ Published0🌍 Public

Last edited Apr 2, 2022

Created on Apr 2, 2022

This interactive family tree visualizes user engagement with questions, branching from "Visit" to "Attempted" and "Correct/Incorrect" paths, with colors encoding outcomes. Built with D3 v5, it uses a horizontal tree layout (`d3.tree`), SVG rendering, and animated transitions (`transition().duration()`) to smoothly collapse and expand nodes on click. The dataset (`treeData`) is loaded from a JavaScript module, and zooming is handled via the `d3.zoom` API.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_8 Family_Tree.

This example displays a hierarchical tree representing user interaction with a learning task. Starting at a root node, it branches into whether the task was visited, attempted, and ultimately answered correctly or incorrectly, with each node distinctly colored. Users can click any node to collapse or expand its children, with smooth animated transitions. The visualization uses D3 v5’s `tree()` layout and `linkHorizontal()` generator, rendering SVG rectangles and text, with zoom functionality enabled through `d3.zoom`.

SShivaKarpe

91% match

Loading thumbnail…

ICE_8_Family_Tree

This interactive family tree visualization displays genealogical relationships using an animated, collapsible node-link diagram. Built with D3 v3 and SVG, it loads hierarchical JSON data from `family-data.json` and renders colored rectangular nodes representing family members, with links labeled by relationship direction. The visualization includes zoom and drag capabilities via `d3.behavior.zoom`, tooltips on hover, and smooth transitions when expanding or collapsing nodes through click interactions. The code uses `d3.layout.tree` for layout calculations and custom collision detection to prevent node overlap.

SShivaKarpe

88% match

Loading thumbnail…

ICE8_Family Tree

A family tree visualization displays hierarchical relationships among named individuals, rendered as an interactive SVG diagram with animated expansion and collapse of branches. Built with D3.js v3 and jQuery, the code uses the `d3.layout.tree` algorithm to compute node positions from the JSON data, then draws rectangular nodes connected by labeled links with directional arrows. Node colors correspond to a `type` field (e.g., type1, type3), and the visualization supports zooming, dragging, and tooltips via D3 behaviors and custom CSS styling, with all tree data defined in the `data-example.json` structure.

UUNTAdityaAnanthula

86% match

Loading thumbnail…

ICE-8 Family Tree

This interactive D3 v3 visualization displays a hierarchical family tree, using a collapsible node layout to show relationships from grandparents down to nieces and nephews. The tree renders as SVG rectangles with color-coded node types and includes animated transitions. Built with the `d3.layout.tree` API, it loads family data from a JSON file and supports click interactions to expand or collapse branches, with tooltips providing additional details.

KKande2011

86% match

Loading thumbnail…

ICE 8 Family Tree Simple

This interactive family tree visualization displays hierarchical relationships using a node-link diagram with expandable and collapsible branches. The D3.js v3 layout algorithm arranges nodes vertically by depth, with color-coded node types and labeled links showing connection directions. Users can click nodes to toggle child visibility, with smooth 750ms animated transitions. The visualization supports pan and zoom through D3's zoom behavior, while tooltips provide additional node information. The tree structure comes from a JSON data file loaded via d3.json, with SVG rendering for all graphical elements including custom arrow markers and drop shadows.

Ddivyageethanjali

86% match

Loading thumbnail…

Family_tree ICE_8

This example visualizes a hierarchical tree structure as an interactive, animated family tree, with each node rendered as a colored box representing a data element and its metadata. The visualization displays parent-child relationships and link directions (SYNC or ASYN) between nodes, using color coding to differentiate node types. Built with D3.js v3 and jQuery, it uses `d3.layout.tree` for tree layout computation, SVG for rendering, and `d3.behavior.zoom` for pan and zoom interactions. Node clicks trigger smooth animations, while tooltips provide additional details on hover. The data comes from a JSON file containing nested tree nodes with names, versions, and link descriptions.

SShivaKarpe

86% match

Loading thumbnail…

ICE 8 Family Tree With Colors

This interactive family tree visualizes hierarchical relationships using colored nodes, with each type mapped to a distinct color (blue, green, yellow, purple). Built with D3.js v3 and SVG, the tree layout supports zooming, panning, and collapsible nodes, while tooltips display additional details. The visualization renders from a nested JSON structure, using `d3.layout.tree`, `d3.behavior.zoom`, and custom collision detection to adjust node spacing dynamically.

Ddivyageethanjali

86% match

Loading thumbnail…

ICE-8 (Family Tree)

This example shows an interactive family tree visualization built with D3.js (v3) and SVG. It renders hierarchical data from a JSON file as colored, rounded rectangles connected by links, with each node color-coded by generation type. The tree layout uses d3.layout.tree, and users can click nodes to expand or collapse branches. The visualization includes zoom and drag behavior via d3.behavior.zoom, along with tooltips and drop-shadow filters for visual polish.

AAnjan Shrestha

86% match