Skip to main content
SimilarExport ZIP
100%

ICE-6 (Dhanusree Kodali)

✓ Published3🌍 Public
DDhanusree Kodali
Last edited Jun 29, 2022
Created on Jun 27, 2022
Forked from Stylized Bar Chart

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.

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 - 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_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
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
88% 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
88% 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

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
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…

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
86% match