Skip to main content
SimilarExport ZIP
100%

DV Family tree ICE_8

✓ Published0🌍 Public
PPallaviManupati
Last edited Apr 3, 2022
Created on Apr 3, 2022
Forked from HTML Starter

This example shows an interactive family tree visualization rendered as an SVG, with nodes labeled by family member IDs and colored according to data attributes. The tree layout uses D3 v5’s `tree()` and `hierarchy()` functions, with horizontal links drawn via `linkHorizontal()` based on the loaded JSON data. Users can pan and zoom using D3’s `zoom()` behavior, while text size varies by node depth. The visualization is built with React and renders directly into the DOM, with custom Playfair Display and Calibri fonts applied.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Family Tree ICE- 8 Data Visualization

This interactive tree visualization displays a family tree with colored labels indicating different generations and relationships. The hierarchical data is loaded from a JSON file and rendered as SVG node-link diagrams using D3 v5’s `tree` layout and `linkHorizontal` path generator. Node labels display family member names with font sizes scaled by depth and colored fills from the dataset. The visualization supports pan and zoom through D3’s `zoom` event, while CSS styling defines the pink link paths and text shadows for readability.

MManasaPatange
89% match
Loading thumbnail…

Fork of ICE 8 Family Tree

This interactive family tree visualization presents hierarchical relationships as a horizontal dendrogram, with root nodes branching outward to descendants. The tree is rendered as SVG using D3 v5’s `tree()` layout and `linkHorizontal()` path generator, while a `zoom()` behavior enables pan and zoom. Node colors and font sizes vary by depth, with labels drawn from a JSON data file. The React framework manages the component, and CSS applies the Playfair Display font and a white text shadow for readability.

Mmanvithareddykarra
89% match
Loading thumbnail…

Family Tree ICE-8

This example shows a family tree visualization using D3 v5, rendered as SVG in a React framework. The tree layout is created with `d3.stratify` and `d3.tree`, positioning nodes by depth and computing curved paths for parent-child links. Circle markers for each person are colored by hierarchical depth—red, blue, green, or yellow—and text labels display names beside the nodes. The data consists of a hardcoded array of child-parent relationships, and the visualization maps these into a clear, color-coded ancestry chart.

HHarshinireddyy19
88% 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
88% match
Loading thumbnail…

ICE8- Family Tree

This visualization presents a family tree as an interactive, animated diagram built with D3.js v3 and React. It shows hierarchical relationships between family members, using colored rectangles for different node types and connecting links with directional arrows. The tree layout is computed with `d3.layout.tree`, and nodes and links are rendered as SVG elements. The visualization supports zooming and dragging via `d3.behavior.zoom`, plus click interactions to expand and collapse nodes. Data is loaded from a JSON file and styled with custom CSS, with tooltips for additional information.

KKolliTeja
88% match
Loading thumbnail…

Fork of ICE 8 Family Tree

This example renders a hierarchical family tree as an interactive SVG visualization using D3.js v5 within a React framework. The tree layout positions nodes by depth, with colored labels—crimson root, orange children, indigo grandchildren, and blue leaves—displayed in a brush script font. The code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to generate the structure and paths, while `d3.zoom` enables panning and scaling. Data comes from a local `data.json` file, and white text shadows improve label readability against the black link strokes.

NNaimisha-M
88% match
Loading thumbnail…

ICE8 - Family Tree

A family tree visualization uses hierarchical node-link layout to display three generations of relatives, with each person rendered as a colored rectangle and connections shown as curved links with directional arrows. The D3 v3 tree layout arranges nodes vertically by depth, while a breadth-first traversal dynamically sizes the SVG canvas based on tree width and depth. Implemented in React with vanilla D3 selections, the visualization supports zoom and drag interactions via `d3.behavior.zoom`, and includes tooltips and collision detection for overlapping nodes. Data comes from a nested JSON file, with node colors assigned by generation type.

Ggeethikal
88% match
Loading thumbnail…

ICE 8 - Family Tree

This visualization displays a family tree as a tidy tree layout using D3.js v5. The code defines hierarchical data with parent-child relationships and renders it as an SVG, with circular nodes colored by depth (green for the root, red for the second level, and blue for deeper nodes). Curved paths connect parent and child nodes using cubic Bézier commands. Each node is labeled with the person’s name. The example uses D3’s `stratify`, `tree`, and `links` APIs to compute the layout and structure.

Ssaidhiraj16
88% match