Skip to main content
SimilarExport ZIP
100%

React refactoring

✓ Published1🌍 Public
0007ebey
Last edited Sep 3, 2020
Created on Aug 24, 2020
Forked from React Starter

This example presents a COVID-19 dashboard built with React and D3 that fetches summary data from the covid19api.com API. Users load global or per-country statistics, which render as animated bar charts comparing new and total confirmed cases, deaths, and recoveries. The interface includes a navigation bar and country selector, both populated dynamically using D3 selections. Charts are drawn with D3 scales and axes, while React components manage state and lifecycle, with the d3.axisBottom, d3.axisLeft, and transition methods handling axis rendering and bar animations.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

React refactoring

This dashboard visualizes COVID-19 summary data from the covid19api.com API. Users load global totals or per-country figures, which are rendered as animated bar charts using D3 v5 scales, axes, and transitions within React components. The interface includes a navigation menu built with D3 selections, a country selector for filtering individual records, and SVG canvases for chart display. Data updates trigger React re-renders alongside D3 append and merge operations.

0007ebey
96% match
Loading thumbnail…

React Starter

A React-based dashboard renders COVID-19 summary data from the covid19api.com REST endpoint. It displays global and per-country metrics as animated SVG bar charts, with the D3 v5 library handling chart construction—using `scaleBand` for categorical axes, `scaleLinear` for quantitative values, and `transition` for bar width animations. The interface uses Materialize CSS components, featuring a navigation bar for switching between views and country select dropdowns. Data updates occur through button clicks that refetch and re-render the visualizations.

0007ebey
89% match
Loading thumbnail…

COVID-19

This interactive COVID-19 dashboard displays country-level statistics using horizontal bars. Users select an attribute from a dropdown, and React state updates the chart to show that metric. Driven by a CSV of global pandemic data, the visualization renders bars with SVG rectangles via React components, using D3 scales (`scaleBand`, `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position the data. Tooltips appear on hover through SVG `<title>` elements.

WW9183907
84% match
Loading thumbnail…

Rendering Marks and Channels with React & D3

This example visualizes the top 20 countries by COVID-19 cases using a horizontal bar chart rendered as SVG. React manages the component state and lifecycle, fetching data from a CSV file via d3.csv, while d3.scaleBand and d3.scaleLinear create the categorical and quantitative scales. The chart displays green bars alongside custom gridlines and tick labels generated through React’s map function, with the data sourced from a GitHub gist containing pandemic statistics.

SSumanya4
82% match
Loading thumbnail…

React plus d3 Axes

This example plots the global cumulative death toll from COVID-19 over time using a React component. The chart displays a black line on a white background, with red marker lines indicating the current date and the three-million-death threshold, while gridlines and axis labels are styled via CSS. The visualization uses React to manage the SVG rendering, while D3 v5 provides the time and linear scales, axis generation (`axisBottom`), line interpolation, and CSV data loading from the Johns Hopkins University repository, with date parsing and reduction over daily columns.

Nnexus1058
81% 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
80% match
Loading thumbnail…

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

This interactive bar chart displays the number of COVID-19 cases for the top 20 countries, using a horizontal bar mark with length encoding the case count. Built with React and D3 v5, the visualization renders as SVG and uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `d3.csv` to load the data from a GitHub-hosted CSV file. The code explicitly draws axis ticks and gridlines, while `ReactDOM.render` mounts the chart into the DOM, and the title "Corona Cases" is provided in the HTML.

Vvenkatajayanth03
80% match
Loading thumbnail…

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

This example shows a bar chart of COVID-19 case counts for the top 20 countries, using the d3.csv loader to fetch data and React hooks (useState, useEffect) to manage asynchronous loading. It renders an SVG with green rectangles scaled by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The code also manually generates axis ticks and labels using d3.ticks and inline SVG elements, avoiding higher-level axis components. The visualization updates its dimensions through computed innerHeight and innerWidth margins.

SSheshidharreddy
80% match