Skip to main content
SimilarExport ZIP
100%

Fork of SVG

✓ Published0🌍 Public
SSushmaNamidi@my.unt.edu
Last edited Apr 25, 2024
Created on Apr 25, 2024
Forked from SVG

This example creates a geographic bubble chart using the Leaflet JavaScript library, visualizing COVID-19 case and death data from a GitHub-hosted CSV file. It plots circle markers with radii scaled by the square root of total deaths onto an OpenStreetMap tile layer, with hover tooltips displaying country names and case counts, and popup labels for death totals. Data is fetched and parsed asynchronously using the PapaParse library.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

https://vizhub.com/drbagwell/cfc6aaba08b54a598475e867bcc8fa21

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Covid-19

This interactive SVG map visualizes the global distribution of confirmed COVID-19 cases, total deaths, and recent 14-day case counts as of September 25, 2020. It displays countries colored by a sequential spectral scale, with hover tooltips revealing detailed statistics. The visualization uses D3.js v5, leveraging `geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and custom zoom and color legend components. Data is loaded from TSV and TopoJSON sources, processed using `topojson` features.

SSaipramod Yerra
80% match
Loading thumbnail…

Fork of Fork

This visualization uses D3.js to plot COVID-19 data from a WHO global dataset, showing total cases against total deaths for each country as individual circles. The scatter plot uses D3's `csv` loader and `scaleLinear` functions to map the data, with axes labeled "Total Cases" and "Total Deaths." Circles are rendered in steelblue, and the chart is drawn as an SVG in a React application. The code defines its own width, height, and margins, using D3's `axisBottom` and `axisLeft` to generate the axes.

66264kusuma@gmail.com
80% match
Loading thumbnail…

Fork of Covid-19

This map visualizes confirmed COVID-19 cases per country as of September 25, 2020, using a sequential color scale applied to a natural Earth projection. It loads country boundaries from the `world-atlas` TopoJSON and case data from a TSV file, then renders each country as an SVG path with a fill color derived from the case count. Hovering highlights a country in red and reveals a tooltip with total cases, deaths, and cases from the last 14 days. The implementation uses d3's `geoPath`, `scaleOrdinal`, and `schemeSpectral`, with custom zoom and interactive color legend controls.

SSaipramod Yerra
77% match
Loading thumbnail…

Fork of Covid-19

A world map uses semitransparent orange circles to show cumulative COVID-19 case counts by country on March 25, 2020. The visualization renders country boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection, and scales circle radii with `d3.scaleSqrt`. Data comes from a CSV of Johns Hopkins case counts, loaded with `d3.csv`. A range slider is present, but it does not currently change the displayed date.

Ddas888530
77% match
Loading thumbnail…

Fork of Streamgraph of covid-19

A streamgraph visualizes COVID-19 case counts across five continents from January to December 2020, using a silhouette offset layout. The SVG rendering, built with D3 v2 in a React framework, loads data from CSV files for daily and monthly aggregation. Hovering a layer fades others and displays a tooltip with the region, case value, and date. The implementation relies on D3's `layout.stack`, `svg.area`, and time scale APIs, with color encoding based on a sequential orange palette.

Iimsohandsome123
77% match
Loading thumbnail…

Fork of Fork of Covid-19

This visualization displays a global map of cumulative COVID-19 cases on March 25, 2020, with orange circles sized by the square-root of case counts. Static by default, it includes a date slider that currently does not update the visualization. It loads world country boundaries via TopoJSON and renders them with `d3.geoPath` using a Mercator projection, while plotting case data from a CSV file. The implementation uses `d3.csv`, `d3.scaleSqrt`, `d3.scaleOrdinal`, and `d3.timeParse` to process and encode the data.

Ddas888530
76% match
Loading thumbnail…

Fork of area chart

This example renders an area chart of COVID-19 total cases per country using D3 v7. It loads CSV data from a GitHub gist, converts the total cases to numeric values, and maps countries to a band scale along the x-axis. The area is drawn as a single SVG path with a steelblue fill, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with country labels rotated and shown every fifth tick. The chart includes axis titles for "Country" and "Total Cases."

Ssaishruthik2361@gmail.com
76% match
Loading thumbnail…

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily case numbers across five continents using an animated silhouette-style stacked area chart. Built with React and D3 v2, it renders SVG paths that change color palettes and update via tooltip interactions. The chart uses `d3.layout.stack` with a silhouette offset, `d3.svg.area` with cardinal interpolation, and `d3.time.scale` for the time axis, pulling data from CSV files for daily, monthly, or original case counts.

XXianbin Gu (Bing)
76% match