Skip to main content
SimilarExport ZIP
100%

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

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

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.

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

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

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha
95% 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 using a horizontal bar chart rendered as SVG marks within a React component. The code uses React’s `useState` and `useEffect` hooks to load and parse CSV data via `d3.csv`, with `scaleBand` and `scaleLinear` mapping country names and case numbers to pixel positions. Axis ticks and gridlines are generated manually by iterating over `xScale.ticks()` and the band domain, while each bar’s width derives from the numeric value. The example demonstrates combining D3’s scales and data loading with React’s declarative element creation.

Aaashrithd4
95% 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
95% 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
95% 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 using a horizontal bar chart, with each bar’s length encoding the population-based case number. Built with React for component structure and D3 v5 for scales and data loading, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the continuous x-axis. Data is fetched from a CSV file via `d3.csv`, and rectangles are rendered as SVG marks. Gridlines and axis tick labels are generated manually using D3’s tick formatting and React’s JSX syntax.

Nnikhitha693
95% 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
94% match