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

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

0 stars0🌍 Public
Rrmgoldberg24
Last edited Jun 5, 2022
Created on Jun 5, 2022

This bar chart visualizes the first 20 countries from a COVID-19 dataset, displaying confirmed cases as horizontal bars on a green SVG canvas. It uses React with D3.js v5, employing `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric case counts. The chart renders axes using D3's `ticks()` method and maps each country to a `rect` element positioned via the scales. The visualization demonstrates how to combine React's declarative component structure with D3's quantitative scales to build an interactive-free chart.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed