Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
Pphemmati
Last edited May 7, 2020
Created on Apr 29, 2020
Forked from HTML Starter

This example visualizes a hierarchical tree of COVID-19 data, showing confirmed cases, deaths, and recoveries across continents and countries. The tree layout uses d3.tree to position nodes, with SVG circles and text labels for each location. Hovering over a node triggers a tooltip displaying the specific statistics. The visualization uses d3.v5 and React, with an animated tree structure that renders the data in a clear, drill-down format.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization presents a hierarchical tree map of COVID-19 case data, showing confirmed cases, deaths, and recoveries by continent and country. The root node aggregates global totals, branching into regions like Asia and individual nations, with China expanding into its provinces. Built with D3.js v5, the code uses a standard tree layout to position nodes and likely links, with each node displaying its name and associated metrics. The static data is embedded directly in the script, sourced from real-world pandemic statistics as of late April 2020. The visualization uses a simple, unstyled SVG rendering without interactive features or transitions.

Pphemmati
92% match
Loading thumbnail…

Untitled

A hierarchical radial tree visualizes COVID-19 case counts from a CSV dataset, organized by continent, country, and province, with leaf nodes sized by confirmed cases. The animation highlights nodes on hover by fading unrelated branches, while tooltips display case totals. Built with React and D3 v5, it uses `d3.nest()`, `d3.hierarchy()`, and `d3.cluster()` to compute the layout, with `d3.line()` drawing links and a viridis scale coloring nodes by depth.

Pphemmati
91% match
Loading thumbnail…

tree

A radial tree visualization shows the hierarchical distribution of COVID-19 cases, with nodes representing top infected regions branching outward from a central root. The layout uses d3.cluster() to arrange nodes in a circular pattern, with each branch's position and length encoding the case counts loaded from data.csv. The visualization is rendered as an SVG with animation, using d3.hierarchy() to structure the data and d3.nest() to group entries by multiple categorical levels. React provides the component framework for this interactive chart.

Pphemmati
86% match
Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214
82% match
Loading thumbnail…

Untitled

This visualization shows the progression of confirmed COVID-19 cases, deaths, and recoveries across multiple countries from January to March 2020. It uses a multi-line chart with time on the x-axis and case counts on the y-axis. The code loads data from three CSV files and uses d3.csv, d3.scaleLinear, d3.line, d3.axisLeft, d3.axisBottom, and d3.curveBasis to render the chart. A timer updates the displayed date range, animating the lines as new data points appear over time.

RRodrigo Vallejos
81% match
Loading thumbnail…

Untitled

A scatter plot tracks COVID-19 confirmed cases against deaths on logarithmic axes, with each point representing a country and its population and regional color encoding. Overlaid dark-red lines radiate from the origin, annotating fatality rates and country labels. A circular legend explains the point size, color, and opacity encoding. The React-based D3 visualization uses `d3.axisBottom`, `d3.min`, and `d3.ticks` for axes and grid, while custom functions render the legend, annotations, and rotated fatality labels, using county-level GeoJSON data from `county.json` as a backdrop.

Pphemmati
80% match
Loading thumbnail…

Untitled

A dashboard of linked COVID-19 visualizations shows global cases via a Leaflet map, interactive line charts of pandemic metrics, and scatter plots. Users can select countries on the map to filter data, while brushable axes and k-means clustering reveal relationships like GDP per capita versus case rates. Built with d3.v7 and SVG animations, the dashboard loads data from a CSV and GeoJSON files.

Bbhargav83
79% match
Loading thumbnail…

COVID-19 Country measure

This visualization displays a hierarchical tree of COVID-19 country measures, with nodes representing categories and subcategories of enforcement and implementation strategies. Text labels size inversely with depth, and curved links connect parent and child nodes. Built with React and D3 v5, it uses `d3.tree` for layout, `d3.linkHorizontal` for path generation, and `d3.zoom` for interactive panning. Data is loaded from a pipe-delimited CSV and converted into a tree structure using `d3.hierarchy`.

Mmpenalver
79% match