Skip to main content
SimilarExport ZIP
100%

Tree Chart for COVID-19, ICE-8

✓ Published0🌍 Public
Ggaddamthanmayeereddy759@gmail.com
Last edited Apr 2, 2024
Created on Mar 29, 2024

This D3.js v5 tree chart visualizes COVID-19 statistics across Asian regions, including countries like Pakistan, India, and Indonesia, with leaf nodes displaying case counts, deaths, and recoveries. The hierarchical data structure is defined in JavaScript and rendered as an SVG using the `d3.tree()` layout algorithm, which positions nodes and draws curved links between parent and child elements. Node colors and link strokes are mapped from data properties, with the entire visualization styled through an external CSS file that applies blue node outlines and green connecting paths.

AI-generated description
MIT Licensed

Similar vizzes

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
85% 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 example visualizes COVID-19 statistics as an interactive tree graph, showing cumulative confirmed cases, deaths, and recoveries for several countries organized by continent. The hierarchy is computed using `d3.hierarchy` and laid out with `d3.tree`, a treemap layout algorithm that positions nodes based on their hierarchical relationships. Nodes are rendered as filled circles with descriptive text labels, while curved paths connect parent and child nodes. The data is embedded directly in the JavaScript source rather than loaded from an external file.

Vvinodreddysagam929@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
84% match
Loading thumbnail…

ICE-8, Network Graph for COVID-19

This interactive network graph visualizes COVID-19 case statistics by continent and country, using a hierarchical tree structure. Nodes represent regions and countries, with leaf nodes displaying specific data points like total cases, deaths, and recoveries. Built with D3.js v6, the visualization employs `d3.forceSimulation` for physics-based layout, combining link, charge, collision, and centering forces, while `d3.drag` enables node repositioning. The data, loaded from `data.json`, is rendered as SVG elements with custom markers and arrowheads, all styled through an external stylesheet.

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

Tree graph

This tree visualization displays COVID-19 statistics by region, from the global root down to individual countries and their cumulative confirmed cases, deaths, and recoveries. The example uses D3 v7’s `d3.tree()` layout and `d3.hierarchy()` to position nodes in a hierarchical structure within an SVG. Leaf nodes carry named values such as “Cumulative Confirmed Cases - 150000,” while branch nodes group continents and countries. The code assigns data-driven properties like `type` and `level` to each node, though the visible rendering draws nodes as white circles with steelblue strokes and gray linking paths.

Cchamarthisreenivasvarma@gmail.com
82% match
Loading thumbnail…

Tree Graph ICE 8

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.

Ddeepthiv.4706@gmail.com
81% match