Skip to main content
SimilarExport ZIP
100%

ICE_8_NIRUPAMA_TREES

✓ Published2🌍 Public
NNirupama Karanam
Last edited Oct 31, 2025
Created on Oct 31, 2025
Forked from Tree

This compact family tree visualization displays hierarchical relationships across multiple generations, with nodes colored by depth to distinguish family levels. It loads CSV data from a GitHub Gist using `d3.csv` and `d3.autoType`, converts rows into a hierarchy via `d3.stratify`, and positions nodes with the `d3.tree` layout. The SVG rendering employs curved path links through `d3.linkVertical`, color-coded circles using `d3.scaleOrdinal`, and an interactive tooltip on mouse events.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_8_NIRUPAMA_NETWORK

This interactive network visualizes a family tree, mapping parent-child relationships from a CSV dataset loaded from a GitHub Gist. It uses a force-directed layout with d3.forceSimulation, incorporating forces for links, charge, centering, and collision. Node colors encode generation level, determined using d3.stratify, and draggable nodes with hover tooltips enhance exploration. The visualization is rendered in SVG using D3.js v7.

NNirupama Karanam
90% match
Loading thumbnail…

ICE8_Family Tree

This family tree uses D3.js v5 to visualize a hierarchical dataset as an SVG diagram. It renders circles for each person, colored cyan for root nodes, red for second-level nodes, and pink for leaves, with blue cubic Bézier curves linking parents to children. The layout is computed using the `d3.stratify()` and `d3.tree()` APIs, with node positions derived from the `tree` layout on an 850x300 canvas. Names are displayed as text labels offset from each circle. The data is a static array of parent-child relationships, manually encoded in the source.

RRahulSai05
86% match
Loading thumbnail…

ICE8_family_tree

This interactive family tree visualization displays hierarchical relationships using a branching node-and-link layout, with each person represented as a circle and their descendants connected by curved paths. The tree expands smoothly when new nodes are introduced, with transitions animating nodes to their final positions. Built with D3.js version 3.5, it uses `d3.layout.tree`, `d3.svg.diagonal`, and CSS-styled SVG elements, with node colors and names coming from the embedded JavaScript dataset.

NNitheeshSama
85% match
Loading thumbnail…

ICE 8 Family Tree

This visualization displays a hierarchical family tree using a horizontal dendrogram layout. The tree shows a root ancestor with three children, each branching into multiple generations with colored labels. The code uses D3 v5's `tree` layout and `hierarchy` function to compute node positions, with `linkHorizontal` for connecting paths. SVG elements are rendered within a React application, and the visualization includes zoom functionality via D3's `zoom` behavior. Node names and colors come from a local JSON file, with font size varying by tree depth.

KK V VINITHA
85% match
Loading thumbnail…

Family Tree ICE-8

This family tree visualization displays hierarchical relationships through an interactive, collapsible tree layout. Nodes represent family members, color-coded by generation level, with labeled links showing connections. The example uses D3.js v3’s `d3.layout.tree` for layout, with SVG rendering and animations for smooth transitions. Data is loaded from a JSON file containing nested family structures, and the tree supports zooming and dragging via `d3.behavior.zoom`.

KKrishnaPriyaKurra
85% match
Loading thumbnail…

Tree for ICE-8

This example displays a family tree for ICE-8 as a horizontal dendrogram, with nodes labeled by names and colored to indicate generational layers. It uses d3.hierarchy and d3.tree to compute the layout, while d3.linkHorizontal generates the curved connecting paths. The visualization is rendered as SVG within a React framework, with pan and zoom enabled through d3.zoom. The data is loaded from a JSON file, and text shadows and font sizing based on node depth enhance readability.

Ssreeramyamini@gmail.com
85% match
Loading thumbnail…

ICE-8: Family Tree

This visualization presents a family tree as a dendrogram, using circles sized by a numeric value and colored by a categorical level to represent individuals. The SVG rendering uses D3 v6's hierarchy and tree layout APIs to position nodes and draw curved links between parents and children. Node colors and link strokes are mapped directly from the data's "level" and "type" properties, with text labels positioned relative to leaf or internal node status.

CChaitanya Galla
85% 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
85% match