React refactoring

100%

React refactoring

✓ Published0🌍 Public

Last edited Dec 9, 2020

Created on Sep 3, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

React refactoring

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.

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

91% 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

87% match

Loading thumbnail…

COVID-19 DASHBOARD

This interactive dashboard visualizes COVID-19 trends with multiple linked charts, including a world map showing total cases, line charts for new cases by country, and an income-bracket comparison. It also includes a vaccination chart and a navigator for exploring case timelines. Built with React and D3 v7, the visualization uses `d3.geoPath` with TopoJSON for map rendering, `d3.scaleTime` and `d3.scaleLinear` for axes, and SVG with animations for interactive updates. Data is loaded from the Our World in Data COVID-19 CSV files, with country coordinates from a custom JSON file.

Bbhargav83

82% 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

81% match

Loading thumbnail…

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

This visualization displays COVID-19 data for 20 countries as a horizontal bar chart, with each bar’s length encoding the reported case count. Built using React and D3 v5, it loads CSV data via `d3.csv` and renders SVG elements. Scales are created with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, while gridlines and tick labels are drawn manually using React components. The chart updates asynchronously as data loads, showing a “Loading...” message initially.

Bbindhureddy98

81% 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

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