Skip to main content
SimilarExport ZIP
100%

Data Visualization - ICE-6 - Bar chart

✓ Published0🌍 Public
Mmanojgne
Last edited Jun 25, 2022
Created on Jun 25, 2022
Forked from HTML Starter

This bar chart displays COVID-19 active case counts for different countries, with values shown in thousands. The visualization uses React hooks to load and manage CSV data from a GitHub gist, while D3 v5 APIs handle the rendering. It employs `scaleBand` for the categorical y-axis representing countries and `scaleLinear` for the numeric x-axis showing case counts. The SVG output includes red rectangular bars and custom axes, with gridlines and tick labels formatted using D3’s axis utilities.

AI-generated description

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

See also React Starter.

MIT Licensed

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

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

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

SSamanvitha1
89% match
Loading thumbnail…

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

This bar chart visualizes COVID-19 cases across the top 20 countries, using horizontal bars to compare case counts. The visualization is built with React and D3 v5, where React manages state and renders SVG elements while D3 scales handle data mapping. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.csv` to load the dataset from a GitHub gist. Tick marks and axis labels are generated manually through React's array mapping rather than using D3's axis components.

SSamanvitha1
89% match
Loading thumbnail…

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

This visualization displays a horizontal bar chart of COVID-19 case counts for the top 20 countries, using a bar length to encode population values. The chart is built with React and D3 v5, where D3’s `scaleBand` and `scaleLinear` define the y- and x-axes, and React renders SVG `rect` marks for each bar with gridlines and tick labels. Data is loaded from a CSV file via `d3.csv`, with numeric parsing applied to the case count column.

Bblikitha
89% match
Loading thumbnail…

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

This visualization displays COVID-19 case counts for the top 20 countries using horizontal bars rendered as SVG rectangles. The chart maps country names along the y-axis with a D3 scaleBand and case numbers along the x-axis with a scaleLinear. React manages the component state and lifecycle, fetching CSV data from a GitHub gist via d3.csv. Axes are manually constructed by mapping over tick values to generate line and text elements. The bars are colored green through CSS, with red gridlines marking x-axis tick positions.

SSheshidharreddy
88% match
Loading thumbnail…

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

This visualization displays COVID-19 case counts for the top 20 countries using horizontal bars rendered as SVG rectangles. The chart maps country names along the y-axis with a D3 scaleBand and case numbers along the x-axis with a scaleLinear. React manages the component state and lifecycle, fetching CSV data from a GitHub gist via d3.csv. Axes are manually constructed by mapping over tick values to generate line and text elements. The bars are colored green through CSS, with red gridlines marking x-axis tick positions.

SSheshidharreddy
88% match
Loading thumbnail…

ice 6

A horizontal bar chart displays the top 10 countries by COVID-19 case counts, with countries listed on the y-axis and case numbers on the x-axis. The visualization uses React to manage state and render SVG elements, while D3 v5 functions like `csv`, `scaleBand`, and `scaleLinear` handle data loading, scaling, and axis ticks. Data is fetched from a GitHub-hosted CSV file.

Bbhargavarathod
88% match