Fork of Fork of Fork of ICE-6 bar graph

100%

Fork of Fork of Fork of ICE-6 bar graph

✓ Published1🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

Forked from Fork of Fork of ICE-6 bar graph

A bar chart displays the total COVID-19 deaths for twelve countries, forming a ranked comparison of mortality. The visualization loads CSV data from a GitHub gist and renders horizontal bars using React and D3 v5. Code uses `d3.csv`, `scaleBand`, and `scaleLinear` to map country names and death counts to SVG rectangles. Axis ticks and gridlines are drawn manually with `line` and `text` elements, while the chart title appears in the HTML heading.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6

This visualization displays a horizontal bar chart of the top 10 countries with the highest COVID-19 death counts, with country names on the y-axis and death totals on the x-axis. The chart uses React for component structure and D3 v5 modules including `scaleLinear`, `scaleBand`, and `csv` for data loading, rendering as SVG rectangles. Data is sourced from a public CSV file fetched asynchronously, and the bars are styled with a uniform purple fill against a dashed-border title.

Vvegurusaiprathyusha

92% match

Loading thumbnail…

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

This bar chart displays COVID-19 data for fifteen countries, ranking them by basic cost. The visualization uses React to manage state and render SVG elements, while D3 v5 provides scales, axes, and data loading via `d3.csv`. Marks are drawn as bars using `rect` elements, with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart loads data from a CSV file hosted on GitHub.

Cchandanagandla

91% match

Loading thumbnail…

ICE-6

A horizontal bar chart displays total COVID-19 deaths for 20 countries, with red bars ranked by country name on the y-axis and a linear death count scale on the x-axis. It loads CSV data via `d3.csv`, parses and filters the dataset, and renders SVG rectangles sized with `scaleBand` and `scaleLinear`. The React component manages state with hooks and uses D3’s axis utilities for gridlines and tick labels.

Ssrividya-bachina

89% match

Loading thumbnail…

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

This example shows the top 20 countries by total deaths from a CSV dataset, rendered as a horizontal bar chart using React and D3. The code leverages `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. SVG rectangles represent each bar, with axes drawn manually via `d3.axisBottom` and tick marks, all positioned using React's declarative JSX markup within an SVG container.

99176371431

89% match

Loading thumbnail…

Fork of ICE-6.js

This bar chart, forked from ICE-6.js, visualizes the total reported COVID-19 deaths for ten countries, with the United States showing the highest count and South Korea the lowest. The visualization uses D3 v7 to map the categorical country names to a band scale on the y-axis and the continuous death counts to a linear scale on the x-axis, rendering the bars as SVG rectangles. The chart’s axes are generated using `d3.axisLeft` and `d3.axisBottom`, while the data is loaded from a local `data.csv` file and styled with cyan fills via CSS.

Aajaysonu

88% match

Loading thumbnail…

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

This visualization displays the top 20 countries by total COVID-19 deaths using horizontal red bars. It renders SVG marks with React state management, while D3 v5 scales (scaleBand, scaleLinear) and axes are computed in the render method. Data loads from a CSV via d3.csv, and the bars’ positions and lengths map country names and death counts through React’s useCallback and useEffect hooks.

99176371431

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

88% match

Loading thumbnail…

ICE-6.js

This bar chart displays COVID-19 death counts by country, with a horizontal layout where each bar's length is proportional to the number of deaths. The visualization uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the CSV data to an SVG canvas. A margin-based coordinate system positions the axes and cyan-filled rectangles, while the data is loaded via `d3.csv` and rendered as a static, non-interactive graphic.

Jjayanthamol99

88% match