100%

Top 10 Countries by COVID-19 Cases Bar Chart

✓ Published0🌍 Public

Last edited Mar 14, 2024

Created on Feb 3, 2024

This bar chart displays the top 10 countries by total COVID-19 cases, with each bar’s height representing the case count and the country name labeled on the x-axis. The visualization uses d3.csv to load data from a GitHub gist and d3.scaleBand for positioning bars, while d3.scaleLinear maps the case values to the y-axis. Hovering over a bar changes its fill color to orange, implemented through d3 selection event handlers. Axes and labels are generated using the @curran/axis-labels library alongside d3.axisLeft.

AI-generated description

A bar chart showing the top 10 most populous countries on Earth as of January 1st 2024.

Challenge

Fork this viz and modify it to show your own data

MIT Licensed

Similar vizzes

Loading thumbnail…

COVID19 Cases TOP 10 countries-March 19

A horizontal bar chart ranks the ten countries with the most COVID-19 cases as of March 19, using grey bars and sans-serif labels from data.csv. The visualization loads CSV data via `d3.csv`, maps country names to a `scaleBand` y-axis and case counts to a `scaleLinear` x-axis, then renders SVG rectangles. It includes axes generated by `axisLeft` and `axisBottom`, with tick formatting via `format('.2s')`, and appends a title text element inside the SVG group.

11995ana

90% match

Loading thumbnail…

COVID19 Cases TOP 10 countries-March 19

This visualization displays the total reported COVID-19 cases for the top ten affected countries as of March 19, using a horizontal bar chart. The chart encodes case counts as bar lengths along a linear scale, while country names are arranged on a band scale. Data is loaded from a local CSV file using `d3.csv`. The SVG rendering is built with the D3 v5 API, specifically `select`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with axis tick labels formatted using `format('.2s')`.

Llori99-data

89% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on recent COVID-19 case counts, with countries on the y-axis and today’s new cases on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG chart with custom tick formatting. Data is loaded asynchronously from a remote API via `d3.json`, and each bar’s length is scaled to the maximum case value. The chart includes axis labels and a title, with axes customized to remove domain lines.

Aaayushina

88% match

Loading thumbnail…

COVID19 Cases TOP 10 countries-March 19

A horizontal bar chart displays the top 10 countries by confirmed COVID-19 cases on March 19, with China and Italy leading. The visualization loads data from a CSV file using `d3.csv`, then renders SVG rectangles scaled by a linear x-axis and a categorical y-axis. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5, with a clickable "Hello" button in the HTML. Axis lines and ticks are removed, and bars are colored grey via CSS.

Vvans01

87% match

Loading thumbnail…

Highest COVID-19 cases by country

This horizontal bar chart ranks the ten countries with the highest confirmed COVID-19 cases as of April 20, 2020, using data from the World Health Organization. It uses d3.csv to load the data, then renders SVG bars with d3.scaleLinear for the x-axis (case counts) and d3.scaleBand for the y-axis (countries), with axes generated by d3.axisLeft and d3.axisBottom. Bar widths reflect case totals, and styled rectangles use a solid blue fill.

Llekanrasheed

86% match

Loading thumbnail…

Top 25 Countries with confirmed covid cases

This visualization shows the top 15 countries with the highest number of confirmed COVID-19 cases using horizontal bar charts. The bars represent case counts with a linear scale on the x-axis and country names on the y-axis. The code loads data from a CSV file hosted on GitHub and uses React’s useEffect hook to fetch and parse the data asynchronously. D3’s scaleBand and scaleLinear functions map the data to SVG rectangles, while d3.csv handles the data import. The chart is embedded within a React component that renders the SVG output directly.

Ddheeraj1509

85% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the daily new COVID-19 cases for the top 10 most populous countries, using data from the Corona API. The visualization demonstrates how to build a custom bar chart with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with labeled axes and a title. The bars are rendered as SVG rectangles, and the chart customizes the axis ticks and removes domain lines for a cleaner presentation.

Aaayushina

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

85% match