Skip to main content
SimilarExport ZIP
100%

Tree Example

✓ Published0🌍 Public
SSonuSriN
Last edited Apr 1, 2022
Created on Feb 18, 2022

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.

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
85% 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
84% 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
84% 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
84% 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
83% 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
83% match
Loading thumbnail…

Tree Playground

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.

KKyle?
82% match
Loading thumbnail…

Tree Example

This interactive tree diagram displays hierarchical data with collapsible nodes. The visualization uses the D3.js library (version 3.5.17) with a static JSON dataset containing a root node and its descendants. The code employs `d3.layout.tree` for layout computation and `d3.svg.diagonal` for link rendering. Users can click nodes to expand or collapse subtrees, triggering smooth animated transitions via D3's `.transition()` method. The SVG rendering includes styled circles and text labels, with nodes colored steelblue or lightsteelblue depending on collapsed state.

RRahulSai05
82% match