Skip to main content
SimilarExport ZIP
100%

ICE-6 - 11629157

✓ Published1🌍 Public
NNiharika-Guthikonda
Last edited Mar 11, 2023
Created on Mar 10, 2023

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

ICE-6_11590101

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.

DDivyasri0310
92% match
Loading thumbnail…

ICE 6

This visualization displays the first 20 countries from a COVID-19 dataset as a horizontal bar chart, with bar lengths representing confirmed cases on January 28, 2020. The React component loads data via d3.csv and renders SVG rectangles using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Grid lines and tick labels are manually generated from the scales, with a blue stroke for vertical lines. The chart updates once data arrives, showing a loading message beforehand.

AAmar09nath
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
90% match
Loading thumbnail…

ICE 6

This bar chart visualizes the number of corona cases across the top 20 countries, using a horizontal layout where bar length corresponds to case counts. The visualization loads data from a CSV file via `d3.csv` and renders SVG elements using React. It employs `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the numeric case values, and manually drawn gridlines and tick labels using D3’s scale methods. The title "Corona Cases" appears in the HTML header.

AAmar09nath
90% 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
90% 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
90% 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
90% match