Tree Playground

100%

Tree Playground

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This tree diagram displays the relationships between blood types and their Rh-positive and Rh-negative subgroups. The visualization uses D3.js v6 with `d3.stratify()` to convert the flat dataset into a hierarchy and `d3.tree()` to compute node positions. Circles represent each blood group, with a color-coded generation scheme using `d3.selectAll().transition()` to animate the connections and node appearance. The SVG elements, including `path` links and `circle` nodes, are rendered with D3 data joins, and text labels identify each group.

AI-generated description

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Question7-network

A hierarchical tree diagram maps blood group types and their Rh factor variants, with nodes color-coded by depth (red for root, blue for level 1, green for leaves). The visualization uses d3.stratify to structure the data, d3.tree to compute layout, and SVG circles and cubic Bézier paths for rendering. Labels from the dataset appear beside each node. The code follows a tutorial pattern and displays a simple branching hierarchy for A, B, AB, and O groups with positive and negative subtypes.

Hharipriyaa07

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

82% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays a hierarchical data structure for blood groups, starting with a root "Blood Group" node that branches into types A and B, each further divided into positive and negative variants. Built with D3.js version 3.5.17, it uses SVG rendering and animation, implementing a collapsible tree layout where users can click nodes to expand or collapse child branches with smooth transitions via the `d3.layout.tree` and `d3.svg.diagonal` APIs.

SSonuSriN

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

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

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

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

80% match