Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6: Sushma Reddy

✓ Published0🌍 Public
SSushmareddy-gudipally
Last edited Mar 6, 2022
Created on Mar 6, 2022

This visualization displays the top 20 countries by COVID-19 case counts on January 28, 2020, using a horizontal bar chart. The chart uses React to manage state and render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning. Data is loaded via d3.csv from a GitHub gist, and bars are drawn as SVG rectangles, with axes and tick labels generated from the scales' domains.

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 the top 20 countries by COVID-19 cases on January 28, 2020, as horizontal bars ranked by population. Built with React and D3 v5, the chart uses `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis case counts, rendering SVG rectangles for bars and manually drawn tick marks and axis labels. Data loads asynchronously from a CSV via `d3.csv`, with numeric parsing applied before state updates trigger re-rendering.

SSaikiran2029
90% match
Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 cases on January 28, 2020, using a horizontal bar chart rendered as SVG. React manages the component state and DOM elements, while D3 v5 provides scales (`scaleBand`, `scaleLinear`), CSV data loading, and tick generation. The data comes from a GitHub-hosted CSV file, and bars and axes are drawn as React elements positioned by D3 scales. Styling is handled via CSS, with green bars and red gridlines.

SSumanya4
89% match
Loading thumbnail…

Fork of ICE-6: Covidcases

Using a bar chart, this visualization displays the top ten countries by active COVID-19 cases in 2022. The React app loads data from a CSV file containing country populations and case counts, rendering it as an SVG. D3’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` are used to position the bars and axes. The chart includes purple gridlines and a title, with data fetched via `d3.csv` and formatted using D3’s `max` and `format` functions. React’s `useState` and `useEffect` hooks manage the asynchronous data loading and rendering process.

Pprathyusha-reddy-arch
89% match
Loading thumbnail…

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

This visualization displays the top 20 countries by COVID-19 case counts (from the "1/28/20" column of a CSV dataset) as a horizontal bar chart. Using React components with D3.js, it renders SVG rectangles whose widths are scaled by `d3.scaleLinear` against the maximum population value and positions the bars along a categorical `d3.scaleBand` axis for country names. D3’s `csv` loader fetches remote data, while axis ticks and labels are generated manually with `xScale.ticks()`. The chart is drawn within a 960×500 SVG canvas, with margins and inner plot dimensions defined by constants.

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

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

This visualization displays the top 20 countries by COVID-19 cases using horizontal bars, with country names on the y-axis and case counts on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles and axes through React components. The chart pulls from a GitHub-hosted CSV file and updates state asynchronously with React hooks, showing a loading message before the data appears.

Ffouzanuddin
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…

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