Skip to main content
SimilarExport ZIP
100%

Fork of ice8

✓ Published0🌍 Public
SSaivignesh-9176
Last edited Mar 30, 2023
Created on Mar 29, 2023

This fork of ice8 displays an interactive family tree from a JSON dataset, rendered as a collapsible hierarchy of circles and labels. Clicking a node toggles its children, animating the layout with smooth transitions. The visualization uses d3.layout.tree and d3.svg.diagonal to position and draw links, with SVG elements styled via CSS. Data loads from an external qn_tree.json file, and node expansion/collapse is handled through custom click events and update functions.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ice8

This interactive tree diagram displays a family hierarchy loaded from a JSON file, with nodes labeled by names and connected by curved links. Users can click any node to collapse or expand its subtree, with smooth 1.1-second transitions animating nodes and links to new positions. The visualization uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for link paths, rendered as SVG with green-bordered circles and bold text labels. Node expansion state is managed by toggling between `children` and `_children` arrays.

PPujitha14challagulla
92% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This visualization displays a family tree as an interactive, collapsible hierarchy. Using the D3.js library (v3), it renders nodes as colored rectangles representing family members, connected by curved links, with tooltips and zoom/pan support. The tree layout is computed via `d3.layout.tree`, and the data is loaded from a JSON file containing nested family relationships. SVG elements and a zoom behavior enable animation and navigation, with node colors indicating generational types.

Bbhargavarathod
91% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical dataset of individuals, with nodes color-coded by their type and labeled with names. Clicking nodes toggles their child branches, while tooltips appear on hover. Built with D3.js v3, it uses a collapsible tree layout with SVG rendering, zoom and drag behavior, and animated transitions between states. Data is loaded from an external JSON file, and custom styles define node shapes, link colors, and tooltip backgrounds.

KKarnisrikanth
91% match
Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using an SVG-based node-link diagram. The tree is rendered with colored, rounded rectangles representing individuals, connected by labeled, arrowed links. Built with D3 v3’s layout and behavior APIs (`d3.layout.tree`, `d3.behavior.zoom`), the visualization supports zooming, panning, and node expansion via click interactions. Data is loaded from a local JSON file (`data.json`), and custom CSS controls node colors and tooltip styling.

Bbhargavarathod
91% match
Loading thumbnail…

Fork of Family tree ice8

This interactive family tree visualization displays hierarchical relationships from a JSON dataset, with nodes representing individuals and links showing parent-child connections. Users can click any node to collapse or expand its subtree, with smooth 1100ms transitions animating nodes and links to their new positions. The code uses D3.js v3’s `d3.layout.tree` for layout and `d3.svg.diagonal` for curved link paths, rendering as SVG. Nodes are styled with green circles and bold text, while collapsed nodes appear lightsteelblue. The animation is driven by D3 transitions, updating node transforms and link path geometry dynamically.

Aajaysonu
91% match
Loading thumbnail…

Fork of ICE8 - Family Tree

A family tree visualization renders hierarchical relationships as a branching SVG chart, with nodes colored by generation (type) and connected by directional links. The D3 v3 layout computes node positions, while custom collision detection prevents overlaps. Interactive zoom-and-drag behavior is enabled via `d3.behavior.zoom`, and clicking a node toggles its children. Node styling includes drop shadows and tooltips, with data loaded from a JSON file. Rendering uses SVG elements and foreignObject for text, with persistent animation during updates.

Yyaswanthsen
91% match
Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304
90% match
Loading thumbnail…

Fork of Fork of Family Tree ICE-8

This visualization shows an interactive family tree as a node-link diagram with collapsible branch nodes and directional links. It loads hierarchical JSON data and renders nodes as colored rectangles (coded by type) with SVG elements and animation. The code uses d3.layout.tree for the tree layout, d3.behavior.zoom for pan/zoom, and d3.select/append to build the SVG structure. Link labels and tooltips provide additional relationship details, while CSS styles define node colors, text appearance, and hover effects.

PPrathyusha0304
90% match