Skip to main content
SimilarExport ZIP
100%

Tree

✓ Published0🌍 Public
Kkakumanusreya
Last edited Apr 12, 2023
Created on Apr 11, 2023

This example shows a hierarchical tree of medical fields and related professionals, with nodes color-coded by generation depth. The visualization uses d3.stratify() to structure the flat parent-child data, d3.tree() to compute the layout, and SVG circles, paths, and text elements for rendering. Labels appear to the right of each node, and brown cubic Bézier curves connect parents to children. The background and text styling come from the linked stylesheet.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree

This example shows a hierarchical tree visualization of patient records, displaying each patient as a leaf node labeled with their last name. The layout is computed using `d3.stratify` to structure the flat patient data and `d3.tree` to calculate node positions. Links between nodes are drawn as cubic Bézier curves using SVG paths, with circles representing each node and text labels positioned relative to children. The visualization is embedded in a React-compatible HTML page, though the provided code uses plain JavaScript with D3 v5 and renders entirely to SVG.

66264kusuma@gmail.com
88% match
Loading thumbnail…

Medical Data Tree CURRENT FINAL

This interactive visualization presents a hierarchical tree of medical data, allowing users to click on nodes to expand and collapse branches or navigate to a new root. The tree is rendered using SVG with smooth animated transitions, utilizing d3.v6's layout and transition APIs. Node positions and link paths are updated dynamically, with circle sizes reflecting the number of children. Data originates from a JSON file, and node descriptions are categorized into medical topics like diseases and treatments, with a clickable info panel displaying node names and keys.

QQuinn Sebso
83% match
Loading thumbnail…

Tree Example

This example shows an interactive family tree built with D3.js, displaying a hierarchical dataset of names and parent-child relationships. The visualization uses the `d3.layout.tree` layout to position nodes and `d3.svg.diagonal` for the curved links between them. Each node is rendered as an SVG circle with a text label, and clicking on a node toggles its children, collapsing or expanding that branch. The nodes and links animate smoothly via transitions, with colors indicating different levels in the hierarchy.

RRavi Teja Bonam
83% match
Loading thumbnail…

Family tree

This example shows a family tree as a hierarchical node-link diagram, with colored circles representing individuals and curved paths showing parent-child connections. The visualization uses d3.stratify to convert flat data into a hierarchy and d3.tree to compute the layout, rendering nodes as SVG circles colored by their depth in the tree (pink, orange, or red) and labeling each with the person’s name. The code runs in a React environment with D3 v5, drawing all elements as SVG shapes.

Vvegurusaiprathyusha
83% match
Loading thumbnail…

Tree

This example shows a family tree constructed from a hardcoded array of parent-child name pairs. The visualization renders green circles connected by red links, with each person’s name displayed inside their circle. Using d3.stratify and d3.tree, the hierarchy is computed and positioned in an SVG canvas. The code animates the connections and circle radii with d3 transitions, while text fades in based on each node’s depth. The page uses a light blue background and centers the layout.

Ppreethamkesa
82% match
Loading thumbnail…

Medical Data Tree - Category

This interactive tree visualization categorizes hierarchical medical data from an external JSON file, using regex patterns to classify nodes into domains like diseases, treatments, or genetics. Built with React and D3 v6, it renders an animated SVG tree where clicking a node collapses or expands its children. The implementation uses D3’s tree layout, transitions, and click handlers to update the view, while a dynamic info panel displays the selected node’s name and key.

QQuinn Sebso
82% match
Loading thumbnail…

Tree

This tree visualization displays a five-generation family hierarchy, with each generation distinguished by both color and node shape, ranging from circles for the root and parents to squares, diamonds, and triangles for subsequent descendants. The D3.js code uses the `d3.stratify()` and `d3.tree()` APIs to convert flat data into a hierarchical structure and compute the layout, drawing links as lines and rendering nodes as SVG shapes within a white-bordered chart. A legend above the chart clarifies the mapping of generation to shape and color.

PP Manisha
82% match
Loading thumbnail…

Tree

This interactive tree visualization displays the hierarchical relationships within Hospital ER data, using a radial layout to reveal parent-child connections. Built with D3.js v7 and React, it renders nodes as colored rectangles and circles, with each node’s size and color varying by depth. The code loads a remote CSV, stratifies it into a tree using `d3.stratify()`, positions nodes via `d3.tree()`, and draws links with `d3.linkVertical()`. Node coordinates come from the tree layout, with labels showing ER names.

66264kusuma@gmail.com
82% match