ICE-6_11590101

100%

ICE-6_11590101

✓ Published0🌍 Public

Last edited Mar 9, 2023

Created on Mar 9, 2023

This visualization displays the top 10 countries by total COVID-19 cases as a horizontal bar chart, with country names on the y-axis and case counts on the x-axis. The bars are rendered as SVG rectangles using React and D3 v5, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`, and axes are drawn manually with gridlines and tick labels. The title indicates the chart focuses on the highest COVID-19 case counts among nations.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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

93% match

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

92% match

Loading thumbnail…

ICE-6 (Bar Chart)

A bar chart displays the top 10 countries by total COVID-19 cases, with country names labeled along the vertical axis and case counts on the horizontal axis. The visualization is built with React and D3 v5, using `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with axes and tick marks generated manually via D3's `max` and `format` functions.

AAashish Pandey

92% match

Loading thumbnail…

ICE-6 (Dhanusree Kodali)

This example visualizes the total number of COVID-19 cases reported in Asian countries, displaying the top 15 countries as a horizontal bar chart with a logarithmic-like linear scale. The visualization uses React and D3 v5, with D3’s `scaleBand` and `scaleLinear` for axes and bar positioning, and `csv` to load data from a GitHub-hosted CSV file. Bars are rendered as SVG `<rect>` elements within a React component, with axis ticks generated via D3’s `axisBottom` and `axisLeft` methods. The chart reads case counts in millions from United Nations World Population Prospects 2019 data.

DDhanusree Kodali

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

89% match

Loading thumbnail…

Fork of ICE-6: Covidcases

Using a bar chart, this visualization displays the top ten countries by active COVID-19 cases in 2022. The React app loads data from a CSV file containing country populations and case counts, rendering it as an SVG. D3’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` are used to position the bars and axes. The chart includes purple gridlines and a title, with data fetched via `d3.csv` and formatted using D3’s `max` and `format` functions. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and rendering process.

Pprathyusha-reddy-arch

89% match

Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 cases on January 28, 2020, as horizontal bars ranked by population. Built with React and D3 v5, the chart uses `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis case counts, rendering SVG rectangles for bars and manually drawn tick marks and axis labels. Data loads asynchronously from a CSV via `d3.csv`, with numeric parsing applied before state updates trigger re-rendering.

SSaikiran2029

89% match

Loading thumbnail…

Untitled

This visualization displays a horizontal bar chart of the top 20 countries by COVID-19 case counts, using data from a CSV file loaded via d3.csv. The chart maps country names on a d3.scaleBand y-axis and case numbers on a d3.scaleLinear x-axis, with blue bars and gridlines rendered as SVG elements. The React component fetches the data asynchronously, parses numeric values, and uses d3’s max function to set the x-domain, while y-axis labels and ticks are manually positioned using SVG text and line elements.

Bblikitha

88% match