Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

846da9b9da8e4a3eb2adda3d4b05deca

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

0 stars0🌍 Public
NNithish Kumar
Last edited Mar 8, 2023
Created on Mar 8, 2023

The visualization displays the top 15 countries by COVID-19 deaths using a horizontal bar chart, with each bar’s length encoded by the `Deaths` value on a linear scale. The chart fetches its data from a CSV file and renders a static SVG. It uses the `d3.scaleBand` for y-axis positioning, `d3.scaleLinear` for the x-axis, and `d3.svg` icons to draw axis ticks and labels. The React component manages state with `useState` and `useEffect`, and the bars and axes are generated by mapping over the data within an SVG `<g>` element.

AI-generated description

A bare minimum HTML page.