ICE

100%

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

This example shows a bar chart of total COVID-19 cases aggregated by country, using data from a WHO global dataset. It first displays the raw categorical bars with steelblue fills, then rotates the x-axis labels for readability. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.sum` for aggregation, and `d3.scaleBand` with `d3.scaleLinear` for positioning. An SVG container with explicit margins renders the axes via `d3.axisBottom` and `d3.axisLeft`, while a rotated y-axis label clarifies the metric.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

88% match

Loading thumbnail…

ICE 6

This visualization displays the first 20 countries from a COVID-19 dataset as a horizontal bar chart, with bar lengths representing confirmed cases on January 28, 2020. The React component loads data via d3.csv and renders SVG rectangles using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Grid lines and tick labels are manually generated from the scales, with a blue stroke for vertical lines. The chart updates once data arrives, showing a loading message beforehand.

AAmar09nath

88% match

Loading thumbnail…

ICE-6 (Bar Chart)

A bar chart displays the top 10 countries by total COVID-19 cases, with country names labeled along the vertical axis and case counts on the horizontal axis. The visualization is built with React and D3 v5, using `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with axes and tick marks generated manually via D3's `max` and `format` functions.

AAashish Pandey

87% match

Loading thumbnail…

ICE-6 - Scatter Plot - 11629157

This example shows the total COVID-19 cases for the top 20 countries as horizontal bars, with each bar’s length proportional to the case count. The visualization uses React with a state hook to fetch and parse a CSV file via `d3.csv`, then renders an SVG using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numerical case axis. Grid lines and tick labels are drawn manually with `d3.axisBottom`-style logic, while the bars themselves are simple SVG rectangles positioned using the computed scales.

NNiharika-Guthikonda

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

ICE 6

This bar chart visualizes the number of corona cases across the top 20 countries, using a horizontal layout where bar length corresponds to case counts. The visualization loads data from a CSV file via `d3.csv` and renders SVG elements using React. It employs `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the numeric case values, and manually drawn gridlines and tick labels using D3’s scale methods. The title "Corona Cases" appears in the HTML header.

AAmar09nath

86% match

Loading thumbnail…

ICE-6 Bar Chart

This D3.js bar chart visualizes COVID-19 case totals for fifteen U.S. states, sourced from a CSV file fetched via `d3.csv`. The horizontal bars, rendered as SVG rectangles, are scaled with `d3.scaleBand` and `d3.scaleLinear` based on the maximum case count. The chart includes gridlines and axis tick labels generated through custom mapping functions, and is built within a React component using `useState` and `useEffect` hooks, with styling applied via inline attributes.

Ggayuvurukuti@gmail.com

86% match

Loading thumbnail…

ICE -6

This visualization displays COVID-19 data for ten countries, using a horizontal bar chart where bar length represents each country's population based on latitude values from the CSV data source. The React application uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and renders SVG rectangles with orange stroke styling. D3's csv parser loads the external data, while d3.max computes the domain for the linear scale, and tick marks are generated programmatically with custom grid lines.

GGARIDIDEEKSHITHREDDY

86% match