Fork of another Tree

100%

Fork of another Tree

✓ Published0🌍 Public

Last edited Mar 31, 2022

Created on Mar 31, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

87% match

Loading thumbnail…

Fork of Family Tree

This example shows a family tree visualization with color-coded nodes for each person, arranged hierarchically from a single root ancestor down through multiple generations. The tree renders as an SVG, with horizontal links connecting parent and child nodes, and labels sized according to depth in the hierarchy. The code uses d3.hierarchy and d3.tree to compute the layout, and d3.linkHorizontal for the curved connecting paths. A d3.zoom handler enables panning and zooming the entire visualization. Node colors and text are drawn from the JSON data, with a custom Playfair Display font applied via CSS.

Kkalyanikotha

87% match

Loading thumbnail…

Fork of Different Family Tree

This visualization presents a family tree as a horizontal dendrogram, with nodes connected by orange links and labeled with names from a JSON dataset. Node color encodes different branches of the lineage, while font size decreases with each generation to show depth. The example uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` components to compute the layout, with SVG rendering and zoom functionality enabled via D3’s `zoom` and `event` APIs. The visualization is built within a React framework, and text elements are styled with a Playfair Display font.

NNaveenrajaYalagandula

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

86% match