dea

rakshitharao27

This horizontal bar chart displays the number of deaths in 2019 for the top 12 countries, with each bar's length representing the death count. The chart uses a React component that loads data from a CSV file via the `d3.csv` function. It employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis. The visualization renders as an SVG with axes and bars constructed using React primitives, styled with simple CSS.

83% match

rakshi

This chart ranks the top 10 most populous countries, displaying their 2019 death counts as horizontal bars. The visualization uses a bar chart format, with the x-axis representing death counts and the y-axis listing country names. Built with the React framework and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file via D3's `csv` function. The SVG rendering is produced by React JSX elements, with styled grid lines and labels.

83% match

rao

This example visualizes the top 20 most populous countries ranked by deaths in India, using a horizontal bar chart. The chart displays each year on the y-axis and the corresponding death count on the x-axis, with bars sized proportionally to the data values. It uses D3 v5’s `scaleBand` for the categorical year axis, `scaleLinear` for the numeric scale, and React for rendering SVG elements. Data is loaded asynchronously via `d3.csv` from an external URL, and axes are drawn manually with SVG `line` and `text` elements.

82% match

Deaths

This bar chart displays the top 10 most populous countries, using horizontal bars to compare 2020 population estimates from the United Nations World Population Prospects 2019. Each bar’s length encodes population with a linear scale, while country names appear on a band scale. Built with React and D3 v5, it renders SVG rectangles via the `Marks` component, with axes from `AxisBottom` and `AxisLeft`, and formats tick labels using D3’s `format` function. Data is loaded asynchronously with `d3.csv` and truncated to the first ten rows.

NNikith Reddy

ram

This bar chart shows the top 13 countries with the highest number of deaths in 2018, with country names on the y-axis and death counts on the x-axis. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG elements, including gridlines and labeled ticks.

DV 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.

Yyamunaunt

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.