Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
GGaneshPenumarthi
Last edited Mar 6, 2022
Created on Mar 6, 2022

This visualization presents newly admitted COVID-19 patients in the UK from January 23 to February 2, 2021, as a horizontal bar chart. The React application loads data from a CSV file using d3.csv and renders the chart as SVG elements. D3's `scaleBand` and `scaleLinear` handle the axes, while grid lines and tick labels are generated from `xScale.ticks()`. Each bar's length corresponds to the daily admission count, with the y-axis displaying dates and the x-axis showing admission numbers. The chart is styled with a steelblue fill for the rectangles.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This visualization displays COVID-19 data for 20 countries as a horizontal bar chart, with each bar’s length encoding the reported case count. Built using React and D3 v5, it loads CSV data via `d3.csv` and renders SVG elements. Scales are created with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while gridlines and tick labels are drawn manually using React components. The chart updates asynchronously as data loads, showing a “Loading...” message initially.

Bbindhureddy98
88% 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
86% 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
86% 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
86% 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
86% 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
86% match
Loading thumbnail…

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

This bar chart displays COVID-19 case counts for the top 20 countries, ranked by their reported infections on January 28, 2020. Using React with D3 v5, the visualization renders SVG rectangles scaled by population data from a CSV file, with D3’s `scaleBand` and `scaleLinear` mapping country names and case values. Axis ticks and labels are generated manually via `.map()` and React elements, while the data is loaded asynchronously with `d3.csv`. The chart shows a horizontal bar layout with green rectangles and red gridlines, highlighting comparative case volumes across countries at that early pandemic date.

SSamanvitha1
85% match
Loading thumbnail…

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

This bar chart displays COVID-19 data for fifteen countries, ranking them by basic cost. The visualization uses React to manage state and render SVG elements, while D3 v5 provides scales, axes, and data loading via `d3.csv`. Marks are drawn as bars using `rect` elements, with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart loads data from a CSV file hosted on GitHub.

Cchandanagandla
85% match