Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Rendering Marks and Channels with React & D3

Public visualization

Rendering Marks and Channels with React & D3

0 stars1🌍 Public
SSumanya4
Last edited Mar 7, 2022
Created on Mar 7, 2022

This example visualizes the top 20 countries by COVID-19 cases using a horizontal bar chart rendered as SVG. React manages the component state and lifecycle, fetching data from a CSV file via d3.csv, while d3.scaleBand and d3.scaleLinear create the categorical and quantitative scales. The chart displays green bars alongside custom gridlines and tick labels generated through React’s map function, with the data sourced from a GitHub gist containing pandemic statistics.

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