Skip to main content
SimilarExport ZIP
100%

Scientific Data Visualization ICE-6 Working with react and d3.js

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

This visualization displays the cumulative Monkey Pox cases for the top 20 countries, using a horizontal bar chart rendered as an SVG. The chart employs React’s `useState` and `useEffect` hooks to asynchronously fetch CSV data via `d3.csv`, then maps each country’s population count to bar widths using `d3.scaleBand` and `d3.scaleLinear` for the y- and x-axes. Gridlines and ticks are generated with `d3.scaleLinear.ticks`, and all visual elements are constructed through React DOM creation. The bars are styled pink via CSS, with blue axis labels and red gridlines.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

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.

Mmanojgne
84% 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
84% 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
83% 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
83% match
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
83% 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
83% match
Loading thumbnail…

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

This visualization displays the top 20 countries by population from a COVID-19 dataset, rendered as horizontal bars showing each country's confirmed case count for the date January 28, 2020. The React application uses D3's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles, with gridlines and tick labels generated from the scales. The code loads data via `d3.csv` from a GitHub gist and uses React `useState` and `useEffect` hooks to fetch and process the data before rendering the chart.

Ggopiganta
83% 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
83% match