Skip to main content
SimilarExport ZIP
100%

Tree graph of the project data(ICE-8)

✓ Published0🌍 Public
Ttejasviteegala@my.unt.edu
Last edited Apr 20, 2024
Created on Mar 31, 2024
Forked from HTML Starter

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.

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 Graph ICE

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.

GGorantla Vishnusai
82% 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
76% match
Loading thumbnail…

ICE-8 Tree structure

This tree graph visualizes a subset of data jobs, showing the hierarchical relationships between job categories, individual job titles, and their associated salary and location details. The visualization uses D3.js v7 with an SVG rendering approach, constructing the tree layout through the `d3.tree()` and `d3.hierarchy()` APIs. Node shapes vary by depth, with ellipses for the root, rectangles for categories, and circles for leaf nodes, while `d3.linkHorizontal()` draws the connecting paths. The data is fetched from a CSV file hosted in a GitHub repository.

Mmedurisk7@gmail.com
75% 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
75% match
Loading thumbnail…

ICE-8 Tree graph

The ICE-8 Tree graph visualizes a hierarchical dataset of employees in a tree layout. It loads CSV data from a Gist URL and uses `d3.stratify()` to convert the flat records into a nested tree structure based on `employee_id` and `parent_id` fields. Nodes are drawn as circles with employee names as labels, and parent-child relationships appear as horizontal curved links. The code uses the `d3.tree()` layout with a fixed size of 800 by 600 pixels, and renders everything as SVG, applying `d3.linkHorizontal()` to compute the link paths. The final visualization displays each employee’s name beside its node, with children positioned to the right and parents to the left.

Cchalasanigayaetiri@gmail.com
75% match
Loading thumbnail…

Fork of ICE-8 Tree graph

This visualization shows a hierarchical tree of hospital job data, including job categories, job titles, salaries, and locations. It is rendered using D3.js v7 and displays nodes as ellipses, rectangles, and circles based on their depth in the hierarchy. The code fetches data from a remote CSV file, transforms it into a tree structure, and uses D3's `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` APIs to create the graph.

BBALAJI MANDAVA
75% match
Loading thumbnail…

Sleep Health- Interactive Visualization Dashboard

This interactive dashboard visualizes sleep disorder prevalence across low, medium, and high stress levels, using 100% stacked bars with animated transitions. Users filter by gender and toggle between all categories or disorders only, with hover tooltips and clickable legend items that isolate healthy versus disordered sleep groups. Built with React and D3 v7 (d3.scaleBand, d3.stack), the SVG chart renders from a CSV dataset and updates bins and counts dynamically. The animation and ordinal color scale highlight how higher stress correlates with increased Insomnia and Sleep Apnea rates.

Ccsabavath@wpi.edu
75% match
Loading thumbnail…

ICE8-Tree graph

This tree visualization displays hierarchical COVID-19 data, starting from a global root and branching into regions like Europe, North America, and Africa, then into individual countries, and finally into cumulative confirmed cases, deaths, and recoveries for each. The structural layout is generated using D3’s `d3.tree` and `d3.hierarchy` APIs, which compute node positions based on the nested data. Each node is rendered as a circle with a label, and parent-child connections are drawn as simple links. The visualization is built using SVG within a static HTML page, as defined in the provided `index.html` and `index.js` files.

Ppilliprathimarani@my.unt.edu
75% match