DV ICE-6 Bar Graph

100%

DV ICE-6 Bar Graph

✓ Published0🌍 Public

Last edited Mar 21, 2023

Created on Mar 21, 2023

Forked from Fork of Fork of ICE-6 Bar Graph

This bar graph shows the top five countries by total COVID-19 deaths, using a horizontal layout with a red gridline and a labeled population axis. The React app fetches comma-separated data from a GitHub gist using d3.csv, then renders an SVG via d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and d3.max for domain calculation, with d3.axisBottom and d3.axisLeft formatting ticks.

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

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

87% match

Loading thumbnail…

Fork of 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.

Cchandanagandla

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

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

Loading thumbnail…

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

This visualization displays the top 10 countries by death cases in 2021 using a horizontal bar chart. The chart maps country names on the y-axis and population values on the x-axis, with blue bars representing each country's population. The React application uses d3.scaleBand and d3.scaleLinear to position bars and axes, while d3.csv loads the data from a GitHub-hosted CSV file. The visualization is rendered as an SVG element, with the code demonstrating how React manages state and D3 handles data processing and scaling.

85% match

Loading thumbnail…

ICE -6 Bar Chart

This bar chart displays the total COVID-19 deaths for the top ten countries, sorted in descending order and colored with D3’s `schemeCategory10` palette. It uses an SVG rendered via D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes added by `d3.axisBottom` and `d3.axisLeft`. A manual legend maps each country’s name to its colored rectangle. The data is loaded from a CSV file using `d3.csv`.

MM Hema

85% match

Loading thumbnail…

gw

This visualization shows the top 10 countries by cumulative COVID-19 deaths, using horizontal bars scaled by total deaths. It renders an SVG bar chart with d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, styled with custom CSS. The data comes from a CSV file sourced from Worldometers, and the chart includes a formatted x-axis with d3.format and labels for the chart title and axis. The code uses D3 v6 within a React framework.

Sserjunfan

85% match