Family Tree by using html

100%

Family Tree by using html

✓ Published1🌍 Public

Last edited Apr 4, 2022

Created on Apr 3, 2022

This example displays a family tree of human blood groups, breaking down the major types (A, B, AB, O) into their positive and negative variants. The hierarchy is rendered as an animated SVG tree using `d3.stratify` and `d3.tree()`, with circles representing each node and colored by generation depth. Transitions animate the links and nodes as they appear. Text labels are added via SVG `text` elements. The data is hardcoded in the script, and the layout is computed with a fixed size of 950 by 250 pixels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Family Tree by using html

This visualization displays a hierarchical tree of human blood groups, showing major types (A, B, AB, O) branching into their positive and negative variants. Nodes are represented as red circles with white labels, connected by animated black links that draw on load. The example uses d3.stratify and d3.tree to compute the layout, with SVG circles and paths rendered via D3 v6 selections. Transitions animate the path drawing and circle radius expansion over 700-900 milliseconds. Node colors vary by depth, and the entire graphic scales to fit the browser window.

MMar-99

92% match

Loading thumbnail…

Family Tree

A family tree visualization displays blood group types in a hierarchical layout, with circles representing each group and subgroup generation. Using D3.js v6, the code employs `d3.stratify()` to convert flat data into a hierarchy and `d3.tree()` to compute node positions. SVG elements render the circles, text labels, and animated paths that transition from collapsed to expanded states via `transition().duration()`. The root node appears dark red, with lighter shades for subsequent generations, all centered on the page.

SSonuSriN

91% match

Loading thumbnail…

Fork of Family Tree

This example visualizes the hierarchy of blood group types using a tree layout, with nodes representing groups like A, B, AB, and O, and their positive or negative variants. The visualization uses SVG circles and text labels, which animate into position via D3 transitions, while links between parent and child nodes also animate. The code applies d3.stratify() to convert flat data into a hierarchy and d3.tree() to compute node coordinates, with circle fill colors indicating generation depth. Rendered with D3 v6, the animation highlights the structure of blood group inheritance.

SSravyaAnnadi

91% match

Loading thumbnail…

Fork of Family Tree

A fork of a family tree displays the hierarchy of blood types, from the root "BloodGroup" through the four main groups (A, B, AB, O) down to their positive and negative variants. The visualization uses an animated SVG tree layout, with circles connected by transitioning paths that grow from each parent node to its children. The code relies on D3 v6's `d3.stratify()` to convert flat data into a hierarchy, `d3.tree()` for layout, and `transition().duration()` to animate the link paths. Circle fill colors are assigned by generation depth, and each node is labeled with white, bold text.

SSwapna1915

89% match

Loading thumbnail…

Fork of Family Tree

This visualization presents the inheritance of blood group types as a branching tree, showing parent groups (A, B, AB, O) splitting into positive and negative variants. The code uses d3.stratify and d3.tree to compute the hierarchy and layout, with SVG circles and text labels colored by generation depth. Animated transitions with d3.transition().duration draw the connecting paths from parent to child nodes, while the text and circles appear sequentially.

SSweetierams

89% match

Loading thumbnail…

Fork of Family Tree

This example shows a tidy radial tree diagram of human blood group types. The visualization maps major blood groups (A, B, AB, O) to their positive and negative Rh factor variants, with each generation assigned a distinct fill color. Built with D3 v6, the code uses `d3.stratify()` to convert the parent-child data into a hierarchy and `d3.tree()` for layout. SVG circles, text labels, and path links are animated into place using D3's `.transition()` API.

SSweetierams

88% match

Loading thumbnail…

Fork of Family Tree

This visualization presents a branching tree of blood group categories, from the top-level "BloodGroup" node down to specific types like A+ve and O−ve. It shows the hierarchical structure of blood types and their subsets. The code uses D3.js v6 with the `d3.stratify()` and `d3.tree()` APIs to compute the tree layout from an array of `{child, parent}` pairs. Nodes are rendered as SVG circles with animated transitions that grow in radius, while connecting paths animate from parent to child positions. Colors change by depth level, using a custom `setGeneration` function.

Ggayathri

87% match

Loading thumbnail…

Fork of Family Tree

This fork of a family tree visualizes blood group inheritance through a hierarchical tree layout. Nodes are circles representing blood types (A, B, AB, O) and their Rh factor variants, with color indicating generation depth. The visualization uses D3.v6’s `d3.stratify()` and `d3.tree()` APIs to compute the layout, while SVG paths animate edges over one second via `transition().duration(1000)` as they draw from parent to child. Each node’s label is placed directly on the circle, and the palette shifts from dark red for the root to light red for deeper levels.

Ggayathri

86% match