React Starter

100%

✓ Published1🌍 Public

Last edited Aug 19, 2020

Created on Aug 17, 2020

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.

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

91% match

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

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

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a bar chart visualization of COVID-19 data, showing confirmed cases, recoveries, and deaths across multiple countries on a specific date. The chart uses the D3.js library, specifically `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering for the bars. The data is loaded from a CSV file containing country-level pandemic statistics. The visualization includes axes with labels and interactive mouseover/mouseout events, though the actual data displayed focuses on the initial case counts from January 2020.

SSarahKiyani

82% match

Loading thumbnail…

React Starter

This example demonstrates a React-based bar chart of country populations using D3 for data loading and SVG for rendering. The code uses React’s `useEffect` and `useRef` hooks to fetch a CSV file via `d3.csv`, parse the population values, and append green rectangles as bars. Although the bars are initially rendered as static SVG elements from a mapped array, the effect attempts to update their height and width using D3 selections, but the dependency array on `[m]` may cause rendering inconsistencies. The visualization includes a text label and a 960×500 SVG canvas.

DDanyalKhawaja

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

80% match

Loading thumbnail…

React Starter

A React starter template renders a dataset as a static bar chart inside an HTML page. Using D3 v5, the visualization appends red paragraph elements for each value and creates teal div bars whose heights correspond to the numeric data, with an animation applied via a ten-second duration during the transition. The code employs `d3.select`, `.data()`, and `.transition().duration()` to build the graph, showing eight variables from an inline array.

MMohammad Afaq Khan

80% match

Loading thumbnail…

React Starter

A React component hierarchy wraps D3-generated SVG axes and rectangles to render a horizontal bar chart from a hardcoded object of key-value pairs. The chart maps object keys to an ordinal y-axis via `d3.scaleBand` and values to a linear x-axis via `d3.scaleLinear`, with `d3.axisLeft` and `d3.axisBottom` for ticks. Bars are drawn as SVG `rect` elements that change fill color on click. The code imports `d3` v5 and uses React refs to attach D3 selections within `componentDidMount` and `componentDidUpdate` lifecycle methods.

0007ebey

80% match