Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Nnikhitha693
Last edited Mar 7, 2022
Created on Mar 7, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
95% 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
95% 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
94% 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
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

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

This example shows a horizontal bar chart of COVID-19 cases by country, displaying the top 20 countries based on population. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading via `d3.csv` and scales with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart renders tick marks, labels, and rectangular bars directly as JSX components, with data sourced from a CSV file hosted on GitHub.

MM
94% match