Skip to main content
SimilarExport ZIP
100%

Vikas Tree

✓ Published0🌍 Public
Ppanduvik99@gmail.com
Last edited Apr 2, 2024
Created on Apr 1, 2024
Forked from HTML Starter

This interactive tree diagram visualizes the classification of cardiovascular diseases, with a root node branching into major conditions like coronary artery disease, heart failure, and stroke, each with specific subtypes. The visualization uses a hierarchical layout created with D3.js version 3.5.17, rendering nodes and links as SVG elements with animated transitions. Distinct color coding by disease level and type is applied through stroke and fill attributes. Hovering over links highlights them in steel blue, and the diagram includes static data for disease relationships, built with React and CSS styling.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vikas Network

This network graph visualizes relationships between cardiovascular diseases, with a central node for Cardiovascular Diseases branching into categories like Arrhythmias and Aneurysms, which further connect to specific conditions. The force-directed layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Data loads from a JSON file, and SVG circles represent nodes while lines with arrow markers show directed links. The code employs D3 v6 methods such as `select`, `scaleOrdinal`, and drag interactions to enable node movement and highlighting on mouseover.

Ppanduvik99@gmail.com
82% match
Loading thumbnail…

Cardiovascular Disease Decision Tree Visualization

This decision tree visualization shows how a cardiovascular disease model classifies patients based on their cholesterol type. The tree branches from a root node into "Yes" and "No" splits, leading to leaf nodes colored green for "Normal" and blue for "Heart Disease," with each node displaying sample counts and percentages. The visualization uses D3.js v6 with an SVG rendering, employing `d3.tree()` layout, `d3.hierarchy()` for data structuring, and `d3.linkHorizontal()` for the curved connecting paths. Circles and text labels represent nodes, with leaves colored according to their classification type.

Ffreyatran124@gmail.com
78% 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
78% match
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
77% match
Loading thumbnail…

trial network graph

This network graph visualizes relationships among cardiovascular diseases, distinguishing broader categories from specific subcategories through connected nodes. A central hub represents Cardiovascular Diseases, with related conditions attached, while links labeled "Subcategory of" connect conditions to their parent categories like Arrhythmias and Aneurysms. The visualization uses D3.js v6 with d3.forceSimulation to position nodes, d3.forceLink for connections, and forceCollide to prevent overlap. Data is loaded from a JSON file, with nodes rendered as blue circles and text labels, plus drag-and-drop interactivity for exploration.

Ppanduvik99@gmail.com
77% 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
76% match
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hospital’s operational hierarchy, from departments like Pharmacy and Laboratory down to individual patient statuses such as “Serving” or “Waiting.” Built with React and D3 v3, it uses a collapsible layout with SVG nodes and animated transitions. Users can pan, zoom, and click nodes to expand or collapse branches, with red blinking highlights drawing attention to specific states. Supplementary tables and timelines display patient details and token information, while a legend allows resetting the view to its initial state.

Ssrinivasjavvadi
76% match
Loading thumbnail…

treee

A hierarchical tree diagram visualizes global health data, organizing countries as parents, disease categories as their children, and individual diseases as leaves. The layout uses a vertical tree structure where nodes are color-coded by depth: orange for countries, blue for categories, and green for diseases. Custom data is rendered as an SVG using D3 v7, employing `d3.hierarchy` to structure the data and `d3.tree` with `d3.linkVertical` to compute and draw the paths. Node circles are styled with inline fills based on depth, with text labels positioned above each node.

Vvemuri.vaishnavi27@gmail.com
76% match