Skip to main content
SimilarExport ZIP
100%

ICE-6 Covid Dataset

✓ Published1🌍 Public
Nnehabaddam
Last edited Mar 12, 2023
Created on Mar 7, 2023
Forked from HTML Starter

This example visualizes the number of active, recovered, and total COVID-19 cases for the top 15 countries in a dataset, using a horizontal grouped bar chart rendered with SVG. Red bars show active cases, blue bars show total cases, and green bars show recovered cases, with a legend implied by the title. The visualization uses React with state management and the D3.js library for data loading via `d3.csv`, scaling with `scaleBand` and `scaleLinear`, and axes through `ticks()`. Data is fetched from a GitHub Gist containing worldwide COVID-19 statistics.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 - 11629157

This visualization presents a horizontal bar chart of COVID-19 total cases for the top 20 countries, using a dataset loaded from a CSV file via d3.csv. The bars are rendered as SVG rectangles within a React component, with scales and axes created using d3.scaleBand and d3.scaleLinear. Gridlines, tick labels, and y-axis labels are generated by mapping over the scale ticks and domain. The chart is displayed at 960 by 550 pixels, with margins and a title heading, and is built as a React app rendered through ReactDOM into an HTML page.

NNiharika-Guthikonda
90% match
Loading thumbnail…

ICE-6 - Scatter Plot - 11629157

This example shows the total COVID-19 cases for the top 20 countries as horizontal bars, with each bar’s length proportional to the case count. The visualization uses React with a state hook to fetch and parse a CSV file via `d3.csv`, then renders an SVG using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numerical case axis. Grid lines and tick labels are drawn manually with `d3.axisBottom`-style logic, while the bars themselves are simple SVG rectangles positioned using the computed scales.

NNiharika-Guthikonda
87% match
Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays COVID-19 active case counts for different countries, with values shown in thousands. The visualization uses React hooks to load and manage CSV data from a GitHub gist, while D3 v5 APIs handle the rendering. It employs `scaleBand` for the categorical y-axis representing countries and `scaleLinear` for the numeric x-axis showing case counts. The SVG output includes red rectangular bars and custom axes, with gridlines and tick labels formatted using D3’s axis utilities.

Mmanojgne
87% match
Loading thumbnail…

ICE-6 Bar Graph

A horizontal bar graph displays the top 20 countries by confirmed COVID-19 cases, with orange gridlines marking the linear x-axis and a categorical y-axis. Built with React hooks and D3 v5, the visualization uses `d3.csv` to load data from a GitHub gist, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles. The code also manually draws tick marks and labels using array mapping rather than D3’s axis components.

Hhm0421
87% match
Loading thumbnail…

ICE-6

This visualization shows the relationship between Country/Region and Confirmed COVID-19 cases for the first 15 entries in a dataset, rendered as a horizontal bar chart using React and D3 v5. The code uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent the bars, with red gridlines and text labels drawn via D3 selections. The chart is embedded in a React component with a blue title, and data originates from a GitHub gist URL.

Hhm0421
87% match
Loading thumbnail…

ice 6

A horizontal bar chart displays the top 10 countries by COVID-19 case counts, with countries listed on the y-axis and case numbers on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 functions like `csv`, `scaleBand`, and `scaleLinear` handle data loading, scaling, and axis ticks. Data is fetched from a GitHub-hosted CSV file.

Bbhargavarathod
87% match
Loading thumbnail…

ICE6 snehith

This example visualizes COVID-19 confirmed cases for ten countries using a horizontal bar chart rendered as SVG with React and D3 v5. It shows each country's case count as a blue bar, with country labels on the y-axis and a linear scale on the x-axis. The code loads data from a CSV file via `d3.csv`, filters to the 22nd through 31st rows, and uses `scaleBand` and `scaleLinear` to map data to positions. React manages the component state and rendering, while D3 handles the scales and axis ticks. The visualization highlights the relative magnitude of cases across selected countries.

Ssai snehith nadipally
87% match
Loading thumbnail…

ICE -6 Bar Chart

The visualization displays the top 10 countries by total COVID-19 recovered cases using a bar chart, where each circle’s vertical position encodes the recovery count on a linear scale. The code fetches data from a CSV hosted on GitHub via `d3.csv`, sorts it in descending order, and slices the first ten entries. It then constructs an SVG scatter plot using `d3.scaleLinear` for both axes, adds circles with `d3.selectAll`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart title and axis labels are set via options, defaulting to a steelblue fill for circles.

MM Hema
87% match