Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
Bblikitha
Last edited Mar 7, 2022
Created on Mar 7, 2022

This visualization displays the first 20 countries from a COVID-19 dataset, showing their reported case counts as horizontal bars. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric case count axis, rendering SVG rectangles. The data is loaded asynchronously via `d3.csv` from a GitHub gist, with tick marks and labels generated manually from the scale domains.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays a horizontal bar chart of the top 20 countries by COVID-19 case counts, using data from a CSV file loaded via d3.csv. The chart maps country names on a d3.scaleBand y-axis and case numbers on a d3.scaleLinear x-axis, with blue bars and gridlines rendered as SVG elements. The React component fetches the data asynchronously, parses numeric values, and uses d3’s max function to set the x-domain, while y-axis labels and ticks are manually positioned using SVG text and line elements.

Bblikitha
94% match
Loading thumbnail…

<iframe width="560" height="292" src="https://vizhub.com/blikitha/f111e8fa345c43fa9a6e6d45227a5024?mode=embed" title="Untitled" frameborder="0" ></iframe>

This example presents a horizontal bar chart that displays the top 20 countries by reported COVID-19 cases, based on data from a CSV file loaded via `d3.csv`. The visualization uses React to manage component state and render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) to map country names and case counts to pixel positions. Each rectangle’s width encodes the case count, and the chart includes a blue gridline for the x-axis ticks.

Bblikitha
89% match
Loading thumbnail…

Untitled

This visualization displays COVID-19 total cases by location using a bar chart rendered with SVG. It loads data from a CSV file via d3.csv, then uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the y-axis, with a fixed domain of 0 to 13. The bars are drawn as rectangles with a teal fill, and axis labels are rotated for readability. The chart is built with d3.v4 within a React framework, though the core logic is plain D3 JavaScript.

Bbhargav83
89% 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, as horizontal bars ranked by population. Built with React and D3 v5, the chart uses `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis case counts, rendering SVG rectangles for bars and manually drawn tick marks and axis labels. Data loads asynchronously from a CSV via `d3.csv`, with numeric parsing applied before state updates trigger re-rendering.

SSaikiran2029
86% match
Loading thumbnail…

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

This bar chart displays the top 20 countries by reported COVID-19 cases, using horizontal bars to compare values. The visualization loads CSV data via `d3.csv` and slices the first 20 rows, with React managing state and rendering SVG elements. Scales are created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axis ticks manually generated and mapped to React components. Each bar is drawn as a `rect` element, with the x-axis grid lines and tick labels rendered as SVG `line` and `text` elements.

Bblikitha
86% 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
85% 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 using horizontal bars, with country names on the y-axis and case counts on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles and axes through React components. The chart pulls from a GitHub-hosted CSV file and updates state asynchronously with React hooks, showing a loading message before the data appears.

Ffouzanuddin
85% 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
85% match