Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Hhm0421
Last edited Mar 24, 2023
Created on Mar 24, 2023

This visualization shows the relationship between Country/Region and Confirmed COVID-19 cases for the first 15 entries in a dataset, rendered as a horizontal bar chart using React and D3 v5. The code uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent the bars, with red gridlines and text labels drawn via D3 selections. The chart is embedded in a React component with a blue title, and data originates from a GitHub gist URL.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

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
91% 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
90% match
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
89% match
Loading thumbnail…

ICE6 snehith

This example visualizes COVID-19 confirmed cases for ten countries using a horizontal bar chart rendered as SVG with React and D3 v5. It shows each country's case count as a blue bar, with country labels on the y-axis and a linear scale on the x-axis. The code loads data from a CSV file via `d3.csv`, filters to the 22nd through 31st rows, and uses `scaleBand` and `scaleLinear` to map data to positions. React manages the component state and rendering, while D3 handles the scales and axis ticks. The visualization highlights the relative magnitude of cases across selected countries.

Ssai snehith nadipally
89% 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
88% match
Loading thumbnail…

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

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

AArefa Patwary
87% match
Loading thumbnail…

ICE-6 Covid Dataset

This example visualizes the number of active, recovered, and total COVID-19 cases for the top 15 countries in a dataset, using a horizontal grouped bar chart rendered with SVG. Red bars show active cases, blue bars show total cases, and green bars show recovered cases, with a legend implied by the title. The visualization uses React with state management and the D3.js library for data loading via `d3.csv`, scaling with `scaleBand` and `scaleLinear`, and axes through `ticks()`. Data is fetched from a GitHub Gist containing worldwide COVID-19 statistics.

Nnehabaddam
87% match
Loading thumbnail…

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

This bar chart visualizes the first 20 countries from a COVID-19 dataset, displaying confirmed cases as horizontal bars on a green SVG canvas. It uses React with D3.js v5, employing `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric case counts. The chart renders axes using D3's `ticks()` method and maps each country to a `rect` element positioned via the scales. The visualization demonstrates how to combine React's declarative component structure with D3's quantitative scales to build an interactive-free chart.

Rrmgoldberg24
86% match