Q2 ICE-8 assignment.

100%

Q2 ICE-8 assignment.

✓ Published0🌍 Public

Last edited Nov 1, 2025

Created on Nov 1, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 - Family Tree

This D3.js v5 example renders a family tree as a tidy tree layout using SVG. The visualization shows three generations of a family, with nodes colored by depth: violet for the root, steelblue for the second level, and gold for the deepest leaves. The code builds the hierarchy with `d3.stratify()`, computes positions via `d3.tree()`, and draws curved cubic Bézier links between parent and child nodes, with each person's name labeled to the right of their node.

PPrasanth Damarla

89% match

Loading thumbnail…

Assignment - 8 - 2.2

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.

AAriful Hasan

89% match

Loading thumbnail…

Family Tree ICE-8

This example renders a family tree as an indented hierarchical diagram using D3.js v5. It visualizes three generations of relatives, with each node represented by a circle whose radius encodes a numeric value and whose fill and stroke colors are set from data properties. Curved link paths connect parent to child nodes using a custom cubic Bézier command. The layout is computed with `d3.tree()` and `d3.hierarchy()`, while SVG elements are bound to the dataset directly in the source code.

AAmanullah007

88% match

Loading thumbnail…

ICE-8 Family Tree

A family tree visualization displays multiple generations of relatives, with nodes colored by generation depth and animated links forming parent-child connections. The example uses D3 v6 with the `d3.stratify()` and `d3.tree()` layout APIs to structure hierarchical data, rendering SVG circles and text labels. Node and link transitions animate over 1.5 seconds, while distinct fill colors—from light blue to dark teal—differentiate each generation level. The data is defined inline as an array of parent-child relationships.

Ssreesushmav

88% match

Loading thumbnail…

ICE-8 — Family Tree (Basic Hierarchy)

This example shows a basic family tree hierarchy with four generations, from a great-grandparent root down to individual family members as leaf nodes. It uses d3.hierarchy to structure the nested data and d3.tree() to compute the layout, with d3.linkHorizontal generating the curved connecting paths. The SVG rendering positions nodes as circles with text labels, and each node includes a title tooltip indicating its depth type (root, internal, or leaf).

Jjanisha30gowda@gmail.com

88% match

Loading thumbnail…

ICE 8 - STEP 2 (A) - Family Tree

This example shows a four-generation family tree, using a vertical tree layout to display relationships from great-grandparents down to the third generation. The visualization encodes each generation with a distinct color for its circular nodes, and labels each member by name. The code builds the hierarchy with `d3.stratify`, then lays it out with `d3.tree()` and draws the edges using `d3.linkVertical()`. Node relations are defined in a hardcoded data array, and the SVG output includes all text and circles.

Ssakethgoud333@gmail.com

87% match

Loading thumbnail…

ICE-8 Family Tree

This example shows an animated family tree with color-coded generations, from a single root ancestor down through descendants. The tree uses D3’s `d3.stratify()` to convert flat parent-child data into a hierarchy and `d3.tree()` to compute node positions. SVG circles and text labels render each family member, while paths animate from parent to child nodes via `transition().duration()`.Generation colors are assigned by depth using a switch function, and all nodes and links transition smoothly into place, making the lineage structure easy to follow.

VVenkat-Dhulipalla

87% match

Loading thumbnail…

ICE 8 Family Tree d3.js

This example builds a family tree visualization using D3.js v5 and SVG. It maps a flat list of parent-child name pairs through `d3.stratify()` and `d3.tree()` into a hierarchical layout, drawing curved link paths between generations. Each person appears as a colored circle, with fill color determined by tree depth via a switch on `d.height`, and a text label beside each node. The tree spans 860 by 310 pixels, with light blue, salmon, and green shades distinguishing lineage levels.

SSrilekha24

87% match