Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

e436a1072e584873ad59d93a687c3536

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

0 stars1🌍 Public
SSheshidharreddy
Last edited Mar 8, 2022
Created on Mar 8, 2022

This visualization displays COVID-19 case counts for the top 20 countries using horizontal bars rendered as SVG rectangles. The chart maps country names along the y-axis with a D3 scaleBand and case numbers along the x-axis with a scaleLinear. React manages the component state and lifecycle, fetching CSV data from a GitHub gist via d3.csv. Axes are manually constructed by mapping over tick values to generate line and text elements. The bars are colored green through CSS, with red gridlines marking x-axis tick positions.

AI-generated description

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

See also React Starter.