Fork of Fork

100%

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of country

This interactive scatterplot visualizes COVID-19 metrics across countries, plotting attributes like new cases against total cases on logarithmic-scaled axes. Each circle represents a country, colored by continent, with a legend to the right. The visualization uses React with D3 v5 scales (`scaleLinear`, `scaleOrdinal`) to render SVG marks and axes. Data is loaded asynchronously from a CSV file using D3's `csv` method, with dropdown menus allowing users to switch between different case and death metrics for the x and y axes.

Rrushithareddyy

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

85% match

Loading thumbnail…

Fork of Fork of Sized Points on a Map

This visualization displays global cumulative COVID-19 cases as semi-transparent red circles sized by total cases on a natural Earth projection. Country boundaries, graticules, and land masses are rendered using d3.geoNaturalEarth1, d3.geoPath, and TopoJSON data from World Atlas. City-level COVID data is loaded from Our World in Data and merged with country properties. React manages component state while d3.scaleSqrt maps case counts to circle radii, with d3.csv fetching tabular data and d3.json retrieving the TopoJSON topology.

Aamanoakane

84% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry

84% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

84% match

Loading thumbnail…

Fork of Covid-19 confirmed cases

This visualization displays global COVID-19 confirmed cases and deaths on a world map, using a spectral color scale to represent case counts per country. Built with React and rendered as SVG, it employs d3.geoNaturalEarth1 and d3.geoPath to project geographic boundaries from world-atlas TopoJSON, while loading case data from a TSV file. A custom color legend with circles and text labels clarifies the scale, and hovering over a country highlights it in red and shows a tooltip with its name, case count, and death toll. The map supports zooming through d3.zoom, and the color scale uses d3.scaleOrdinal with d3.schemeSpectral.

Bbhargav83

83% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays COVID-19 data for 20 countries as a horizontal bar chart, with each bar’s length encoding the reported case count. Built using React and D3 v5, it loads CSV data via `d3.csv` and renders SVG elements. Scales are created with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while gridlines and tick labels are drawn manually using React components. The chart updates asynchronously as data loads, showing a “Loading...” message initially.

Bbindhureddy98

83% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a bar chart of COVID-19 case counts for the top 20 countries, using the d3.csv loader to fetch data and React hooks (useState, useEffect) to manage asynchronous loading. It renders an SVG with green rectangles scaled by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The code also manually generates axis ticks and labels using d3.ticks and inline SVG elements, avoiding higher-level axis components. The visualization updates its dimensions through computed innerHeight and innerWidth margins.

SSheshidharreddy

83% match