Fork of Family Tree

100%

Fork of Family Tree

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 17, 2023

Created on Jul 17, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

96% 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

95% 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

94% match

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

94% 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

93% 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

92% match

Loading thumbnail…

Family Tree by using html

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.

DDanthalakirankumar

89% match

Loading thumbnail…

Fork of another Tree

This example shows a family tree visualization representing blood group inheritance, with names organized hierarchically by blood type. The tree layout is computed using `d3.tree` and `d3.hierarchy`, and rendered as an SVG with `d3.linkHorizontal` paths connecting parent and child nodes. Text labels for each descendant are positioned dynamically based on node coordinates, and `d3.zoom` enables panning and zooming of the entire diagram. The styling uses the Playfair Display font and a custom text shadow for readability. Data comes from the `family.json` file.

SSonuSriN

89% match