Fork of ICE-6: Covidcases

100%

Fork of ICE-6: Covidcases

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from Fork of Fork of ICE-6: task 1

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

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

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha

90% match

Loading thumbnail…

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

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

AArefa Patwary

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

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 using horizontal bars, with country names on the y-axis and case counts on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles and axes through React components. The chart pulls from a GitHub-hosted CSV file and updates state asynchronously with React hooks, showing a loading message before the data appears.

Ffouzanuddin

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 case counts using a horizontal bar chart, with each bar’s length encoding the population-based case number. Built with React for component structure and D3 v5 for scales and data loading, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. Data is fetched from a CSV file via `d3.csv`, and rectangles are rendered as SVG marks. Gridlines and axis tick labels are generated manually using D3’s tick formatting and React’s JSX syntax.

Nnikhitha693

89% match

Loading thumbnail…

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

This bar chart displays COVID-19 case counts for the top 20 countries, ranked by their reported infections on January 28, 2020. Using React with D3 v5, the visualization renders SVG rectangles scaled by population data from a CSV file, with D3’s `scaleBand` and `scaleLinear` mapping country names and case values. Axis ticks and labels are generated manually via `.map()` and React elements, while the data is loaded asynchronously with `d3.csv`. The chart shows a horizontal bar layout with green rectangles and red gridlines, highlighting comparative case volumes across countries at that early pandemic date.

SSamanvitha1

89% match