Tree Graph ICE 8

100%

Tree Graph ICE 8

✓ Published0🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

A tree diagram shows the hierarchical structure of global health data, with countries (Brazil, India, Australia, Nigeria) branching into disease categories and specific diseases. The visualization uses a horizontal tree layout with colored nodes—orange for countries, light blue for disease categories, and green for diseases—to distinguish hierarchy levels. The code employs D3 v7's `d3.hierarchy` and `d3.tree` APIs to compute layout positions, and renders the SVG with `linkHorizontal` paths and circles via a `.join()` operation. A legend above the chart explains the color coding.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Tree

This horizontal tree diagram visualizes a hierarchy of global health data, tracing from a "Global Health" root through four countries (Canada, Japan, Germany, Kenya) into disease categories and specific illnesses. Node colors encode the tree depth, with a legend distinguishing global health, country, category, and disease levels. The code uses D3 v7’s `d3.hierarchy` and `d3.tree` layout, drawing links with `d3.linkHorizontal` and rendering nodes as SVG circles and text labels. Styling is minimal, relying on CSS classes for links and nodes.

BBhanuGadde@my.unt.edu

90% match

Loading thumbnail…

Tree Graph

A hierarchical tree graph visualizes relationships among three countries, their health categories, and specific diseases. It uses a static, hand-coded dataset with India, France, and Brazil, each branching into two categories like Infectious or Respiratory, which further split into two diseases each. The code uses the d3.hierarchy and d3.tree layouts to compute node positions, and d3.linkVertical for curved link paths. Rendered as an SVG, circles and labels are color-coded by depth—orange for country, light blue for category, and light green for disease—with a legend clarifying the mappings.

Aamalli7433@gmail.com

88% match

Loading thumbnail…

graph

This example presents a hierarchical tree diagram of global health data, organizing countries into disease categories and specific diseases beneath a “Global Health” root. The visualization uses an SVG-drawn tree layout, with colored nodes indicating depth: orange for countries, blue for disease categories, and green for individual diseases. The code builds the hierarchy with `d3.hierarchy()`, positions nodes using `d3.tree()`, and connects them with `d3.linkVertical()` paths. Labels appear above each circle, and the layout is calculated dynamically based on the 800×800 SVG dimensions.

Yyashaswisanjanaaerra@my.unt.edu

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

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

85% match

Loading thumbnail…

Fork of ICE8-Tree graph

This tree visualization displays hierarchical COVID-19 data, showing country-level statistics like cumulative confirmed cases, deaths, and recoveries branching from regional classifications. The structure uses colored circles and text labels to represent nodes and links. Built with D3.js v7, it applies `d3.hierarchy()` and `d3.tree()` to compute node positions, rendering the layout as an SVG with custom margin settings. The code defines static data objects with nested children arrays, and the visualization presents this data using a classic node-link diagram where each level represents a different data category.

Jjammigumpula.priyanka193@gmail.com

84% match

Loading thumbnail…

Fork of ICE8-Tree graph

This example shows a hierarchical tree visualization of COVID-19 data, with branches for continents, countries, and leaf nodes displaying cumulative confirmed cases, deaths, and recoveries. The graph uses a standard d3.tree layout with SVG rendering, where nodes are circles connected by curved links and labeled with country names. The code defines the data structure manually, applies d3.hierarchy to nest the data, and uses d3.tree().size() to compute node positions. Styling is applied through CSS classes for nodes and links, with the visualization rendered inside an SVG container.

AAnkit Kaushal

83% match

Loading thumbnail…

Fork of ICE8-Tree graph

This example shows a hierarchical tree visualization of COVID-19 data, organizing global regions (Europe, North America, Africa) into countries and their respective cumulative case, death, and recovery statistics. Each node is represented as a circle with text labels, connected by gray links, and rendered as scalable vector graphics (SVG) using the D3.js v7 library. The code constructs the tree layout using the `d3.tree()` and `d3.hierarchy()` functions, and applies custom CSS for node styling. Data is hardcoded within the JavaScript, and the visualization is created by declaring an SVG element when one does not already exist.

Cchamarthisreenivasvarma@gmail.com

82% match