Tree Graph ICE

100%

Tree Graph ICE

✓ Published1🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

This interactive tree diagram displays hierarchical health data, structuring gender, age, and sleep/stress metrics as a branching network. The visualization uses colored nodes—red for gender, blue for age, and green for metrics—with connecting links, and the D3.js library (v7) builds the layout via `d3.tree()`, `d3.hierarchy()`, and `d3.linkVertical()`. Each metric leaf node labels specific sleep quality and stress level values, with the SVG rendering driven by direct DOM manipulation through D3 selections. The chart is populated from hardcoded JSON data embedded in the HTML file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree graph of the project data(ICE-8)

This tree graph visualizes the distribution of sleep disorders across different occupations from a CSV dataset. The hierarchical structure shows disorder categories as root nodes, with occupation leaves displaying aggregated counts. Built with React and D3.js v6, the visualization uses `d3.tree` layout and `linkHorizontal` for curved connections. Node symbols vary by depth using `d3.symbol` with circle, square, and triangle shapes, rendered as SVG paths. A legend and color-coded nodes distinguish hierarchical levels.

Ttejasviteegala@my.unt.edu

82% match

Loading thumbnail…

Fork of network ICE

This example visualizes a small health data network as a force-directed graph, organizing records by gender, then age, and finally metric values for sleep quality and stress level. Nodes are colored by hierarchy level: purple for gender, gold for age, and teal for metric leaves. The layout is computed with `d3.forceSimulation`, using `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, with draggable nodes via a custom drag handler. Rendering is SVG-based, with node labels and a legend showing the color mapping.

GGorantla Vishnusai

82% match

Loading thumbnail…

Ice 8 Tree Graph

This visualization presents a hierarchical tree chart exploring factors related to cardiovascular disease, with a root node representing the disease itself branching into categories like Sex and Age Category, and further into subcategories with specific data values. The tree structure is constructed using the `d3.tree()` and `d3.hierarchy()` APIs from D3 v5, with nodes rendered as circles and links as cubic Bézier paths. Node colors vary by hierarchy level, and the data originates from a hardcoded JSON structure within the code, though an alternative CSV-based data source is referenced in the index.js file. The visualization is rendered as an SVG within an HTML page.

MM Hema

82% match

Loading thumbnail…

Fork of treee

This example displays a hierarchical tree diagram illustrating sleep data for three people, with leaf nodes representing specific attributes like sleep duration, stress level, and productivity. The root node, "Sleep Data," branches to person nodes, which then branch to their respective attributes. The visualization is rendered as an SVG using D3 v7, employing the `d3.hierarchy` and `d3.tree` layout functions to position nodes and `d3.linkVertical` to draw connecting paths. Node colors vary by depth: blue for the root, yellow for person nodes, and red for attribute leaves.

VVignesh Nallamothu

80% match

Loading thumbnail…

ICE8-Tree graph

This visualization displays patient records as a hierarchical tree, showing each patient’s ID, gender, age, SAT score, race, admin flag, wait time, and department referral as leaf nodes. Using D3 v7 with an SVG rendering approach, the code builds the tree via `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to draw the connecting paths. Node circles and text labels are appended to groups, with styling handled through CSS. The dataset is a static array of patient objects, transformed into the treemap’s nested structure for display.

66264kusuma@gmail.com

79% match

Loading thumbnail…

ICE-8 TREE GRAPH

This visualization uses D3.js v7 to render a tree graph of medical patient records. The hierarchical layout displays patient names as top-level nodes, with an "Additional Info" branch expanding to reveal attributes like age, gender, blood type, medical condition, and admission date. The SVG rendering uses d3.tree() to calculate node positions and adds circles and text labels for each node, with curved links connecting parent-child relationships. The data is hardcoded in the script and includes three sample patients with their associated metadata.

Ppeddubalaji@gmail.com

79% match

Loading thumbnail…

Fork of ICE8-Tree graph

This tree graph visualizes patient data from a sample dataset, using a hierarchical layout to show each patient’s name, ID, gender, and age as leaf nodes. The visualization employs the D3.js v7 library with an SVG rendering approach, utilizing the `d3.tree` layout and `d3.hierarchy` to structure the data. Links are drawn with `d3.linkHorizontal`, while circles and text labels are styled via CSS. The code computes node positions and connects them to display the tree structure.

KKusumaKumariDama@my.unt.edu

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

78% match