Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSamanvitha1
Last edited Jun 26, 2022
Created on Jun 26, 2022

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using length as a visual channel to encode the number of reported cases on a given date. The chart is built with React components that render SVG elements, while D3’s `d3.csv`, `scaleBand`, and `scaleLinear` handle data loading and scaling. Axes are manually constructed by mapping tick values to SVG lines and text labels. The data comes from a remote CSV file containing daily case numbers per country.

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

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

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using SVG marks rendered through React components. It combines React state management with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) to position rectangles and axes. The code fetches CSV data from a GitHub gist, maps values with `d3.csv`, and manually draws tick lines and labels using JSX rather than D3 axis generators.

Vvegurusaiprathyusha
95% match
Loading thumbnail…

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

This example shows a horizontal bar chart of COVID-19 case counts for 20 countries, using SVG marks rendered through React components. It combines React state management with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) to position rectangles and axes. The code fetches CSV data from a GitHub gist, maps values with `d3.csv`, and manually draws tick lines and labels using JSX rather than D3 axis generators.

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

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

This example shows a horizontal bar chart of COVID-19 cases by country, displaying the top 20 countries based on population. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart renders tick marks, labels, and rectangular bars directly as JSX components, with data sourced from a CSV file hosted on GitHub.

MM
94% match
Loading thumbnail…

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

This example shows a horizontal bar chart of the top 20 countries by COVID-19 cases, using data from a CSV file loaded via `d3.csv`. The visualization maps country names to the y-axis with `d3.scaleBand` and case counts to the x-axis with `d3.scaleLinear`, rendering blue bars as SVG `<rect>` elements. The React component manages state with `useState` and `useEffect`, while D3 handles scaling and tick generation for both axes. The code demonstrates a hybrid approach where React renders marks and channels, and D3 provides the underlying scales and data processing.

KKolliTeja
94% match