Skip to main content
SimilarExport ZIP
100%

ICE8.3

✓ Published0🌍 Public
BBryanA999
Last edited Apr 5, 2022
Created on Apr 4, 2022
Forked from Hello VizHub

This is a hierarchical tree visualization of family relationships, showing a root node ("Hughey") branching into three child nodes, one of which has further descendants. The tree layout uses d3.tree and d3.hierarchy to compute node positions and link paths, with d3.linkVertical generating the curved connectors between nodes. Node labels are rendered as SVG text elements, colored according to the color property stored in the JSON data source, while the links are styled with a light golden stroke via CSS. The visualization is built with D3 v5 and displayed in a full-screen SVG container.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE-8 Family Tree

This visualization shows a hierarchical family tree with three levels of nodes, where circle size encodes a numeric value and node color varies by branch. The root node "Sandeep" branches into two children, each with their own offspring, using colored links that match the child nodes' fill colors. Built with D3 v5, it uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders SVG paths for curved links and circles with text labels. Node styling is applied directly via inline attributes and CSS classes, with stroke and fill colors drawn from the data properties.

Llikith1266
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
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
87% match
Loading thumbnail…

ICE-8 Family Tree

This example displays a family tree as a hierarchical node-link diagram. It uses d3.hierarchy and d3.tree to compute the layout, then renders it as SVG with d3.linkHorizontal for curved edges and circles for individual nodes. Named labels appear above each node, while custom logic assigns distinct stroke colors—maroon, indigo, orange, and green—based on generation depth. Data is loaded from a remote JSON file via fetch, and the visualization updates reactively within a React component using useEffect.

SSanjib Paudel
87% match
Loading thumbnail…

ICE 8 Family Tree

This interactive family tree visualization displays the ICE 8 lineage, using a hierarchical layout to organize three generations of relationships. Each node is labeled with a family member's name and colored according to their generational level. The implementation uses D3 v5’s `tree` layout, `linkHorizontal` path generator, and `hierarchy` function to structure the data from a nested JSON file, with SVG rendering. Pan and zoom capabilities are added via D3’s `zoom` event, while text styling and custom fonts are applied through CSS.

NNaimisha-M
87% 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
87% match