Skip to main content
SimilarExport ZIP
100%

Assignment - 8 - 2.2

✓ Published1🌍 Public
AAriful Hasan
Last edited Apr 12, 2026
Created on Apr 12, 2026

This family tree visualization displays a four-generation hierarchy using distinct colors and shapes for each layer: squares for the root, circles for grandparents, triangles for parents, and diamonds for children. Built with D3 v7, the example uses the `d3.hierarchy` and `d3.tree` APIs to compute the layout, `d3.linkVertical` for the connecting links, and `d3.symbol` with specific shape types and color functions per depth. Node positions are translated via SVG groups, with labels placed beneath each shape. The static data is embedded directly in the JavaScript code.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment - 8 - 2.1

This family tree visualization displays three generations of a family using a hierarchical tree layout. The D3.js visualization uses the `d3.hierarchy` and `d3.tree` APIs to position nodes and `d3.linkVertical` to draw connecting links as SVG paths. Each node is a colored circle, with distinct colors differentiating grandparents, parents, and children, including a node for "Me" and cousins. The SVG is fixed at 900x500 pixels, and the data is hard-coded as a JavaScript object within the script.

AAriful Hasan
94% match
Loading thumbnail…

Q2 ICE-8 assignment.

This example renders a family tree as a hierarchical D3 visualization, showing three generations of nodes linked by curved paths. The tree layout positions each family member in a clear vertical structure, and circles are color-coded by generational depth: orange for grandparents, blue for parents, and green for children. The visualization uses `d3.hierarchy` to structure the data and `d3.tree` to compute the layout, with `d3.linkVertical` generating the connector paths between nodes. A legend explains the color scheme, and the SVG is built with `d3.select` and `.append` operations.

Ssowjanya
89% match
Loading thumbnail…

Tree

This tree visualization displays a five-generation family hierarchy, with each generation distinguished by both color and node shape, ranging from circles for the root and parents to squares, diamonds, and triangles for subsequent descendants. The D3.js code uses the `d3.stratify()` and `d3.tree()` APIs to convert flat data into a hierarchical structure and compute the layout, drawing links as lines and rendering nodes as SVG shapes within a white-bordered chart. A legend above the chart clarifies the mapping of generation to shape and color.

PP Manisha
88% match
Loading thumbnail…

Family Tree

A family tree visualization displays hierarchical parent-child relationships across four generations, with nodes colored by depth and labeled with character names. Each connection animates from a horizontal line into a diagonal link as the tree expands. The implementation uses D3 v6’s `d3.stratify()` to build the hierarchy from flat data and `d3.tree()` to compute layout positions, while SVG circles, text, and paths are rendered with transitions on `attr` for smooth node growth and link drawing.

LLG0498
87% match
Loading thumbnail…

Family Tree

This family tree visualization displays a hierarchical dataset of family members across several generations, with nodes colored by generation and connected by animated green links. Built with D3.js v6, the code uses the `d3.stratify()` utility to structure the parent-child data and `d3.tree()` to compute the layout. Nodes are rendered as SVG circles with a 1.5-second path-drawing transition, while text labels identify each person. Generation colors are assigned via a custom `setGenerations()` switch function, ranging from orange for the root to teal for deeper levels.

GGARIDIDEEKSHITHREDDY
86% match
Loading thumbnail…

Question 3 – Family Tree Visualization

This colorful family tree visualization displays hierarchical relationships using a custom dataset of family names. The D3 v7 code builds an SVG rendering with a `d3.hierarchy` layout to position nodes and `d3.linkVertical` for the connecting edges. Each generation is distinguished through a `d3.scaleOrdinal` color scale, with interactive hover effects revealing tooltips that show the member name and generation depth.

Vvunnamnandini13@gmail.com
86% match
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana
86% match
Loading thumbnail…

Family tree

A family tree visualization maps a ten-person genealogy dataset with D3.js v6, using ancestor relationships to position nodes across four generations. Distinct colors (blue, lawngreen, magenta, white) encode each generation’s depth. The rendering uses SVG elements with animated transitions: paths draw over two seconds to form connections between parents and children, while circles grow to size 40 and labels appear with bold black text. The code leverages d3.stratify and d3.tree to compute hierarchical layout and link data.

Eeravellisaimeghana
86% match