Fork of Fork of Network Graph

100%

Fork of Fork of Network Graph

✓ Published0🌍 Public

Last edited Apr 9, 2025

Created on Apr 8, 2025

This example shows a manually created hierarchical tree of diabetes data, grouping patients by age range and displaying binary outcomes as colored nodes. Blue and red circles represent outcome 0 and 1, while gray marks the root and branch nodes. Using d3.hierarchy and d3.tree, the layout positions nodes, with d3.linkHorizontal drawing curved paths for links. The SVG rendering applies fill colors based on the data type and positions labels with adjusted text anchors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree Structure

This fork of a D3 tree structure visualizes a dataset on cardiovascular disease, breaking down the root "Heart Disease" node by sex and age category, with leaf nodes displaying related statistics. The chart uses a hierarchical layout created with `d3.tree()` and `d3.hierarchy()` to position nodes, rendered as SVG paths and circles. Node text labels are styled via CSS, while links and node colors are set through inline styles in JavaScript. The source code defines the data structure explicitly, and the visualization updates dynamically based on this nested hierarchy.

Sshreyasribearelly@gmail.com

82% match

Loading thumbnail…

Fork of Fork for plotting tree

This example displays a hierarchical tree visualization of hospital emergency room data, organized by department referral and showing individual patient details. Using D3.js v7, it fetches CSV data from a GitHub repository, transforms the flat records into a nested structure, and renders the result as an SVG tree layout. The visualization employs `d3.csv`, `d3.hierarchy`, and `d3.tree` to position nodes, with `d3.linkHorizontal` generating curved links between parent and child elements. Each patient node branches into leaf nodes for attributes like gender, age, date, and wait time.

BBALAJI MANDAVA

81% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

81% match

Loading thumbnail…

Fork of Fork of Fork of Tree

A single patient record from the cardio_train.csv dataset forms a small hierarchical tree, with the cardio status as the root and eleven other attributes—age, gender, height, weight, blood pressures, cholesterol, glucose, and lifestyle flags—as leaf nodes. The visualization uses D3.js v6 with a tree layout, rendering nodes as colored circles and connecting them with horizontal links. The code reads the semicolon-delimited file via `d3.dsv`, converts coded values to readable text, and maps the data into a hierarchy using `d3.hierarchy` and `d3.tree`.

Ffreyatran124@gmail.com

81% match

Loading thumbnail…

q1

This example shows a compact vertical tree layout that organizes diabetes patient data by outcome, age range, BMI, and glucose level. The tree uses `d3.tree()` with a layout size tailored to an SVG canvas, where links are drawn with `d3.linkVertical()`. Nodes are rendered as circles colored by parent/leaf status, with text labels offset to the right. The visualization relies on D3 v7 to parse a nested JavaScript object and position nodes horizontally across the 1200×400 viewport, providing a condensed overview of attribute combinations in the dataset.

Vvaishnavgck@gmail.com

80% match

Loading thumbnail…

Fork of Fork of Tree

A static hierarchical tree diagram is built from a hard-coded dataset of parent-child name pairs. Each node is rendered as a large grey circle with a red outline, labeled with the person's name. The example uses D3 version 6 to construct the tree layout via `d3.stratify` and `d3.tree`, then draws the connecting links as blue paths. The SVG markup is created directly, with animated transitions on the path and circle elements that adjust positions and sizes over a short duration.

AArv1228

80% match

Loading thumbnail…

Fork of Fork of Fork of treee

This example visualizes a hierarchical dataset of sleep-related attributes using a tree layout. Three person nodes branch to attribute leaves such as sleep duration, stress level, and productivity, with circles for persons and rounded rectangles for attributes. Built with D3 v7, it uses `d3.hierarchy`, `d3.tree`, and `d3.linkVertical` to position the SVG elements. Hovering over a node highlights its circle and displays the node's name in an HTML tooltip.

VVignesh Nallamothu

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

80% match