Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

f67d909ca71f4b5186ba7a86f1f4df2b

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

0 stars0🌍 Public
AArefa Patwary
Last edited Mar 7, 2022
Created on Mar 7, 2022

This bar chart displays the top 11 best-selling books from an 1890 dataset, showing each book’s population-related value as a horizontal bar. The visualization uses React hooks like `useState` and `useEffect` to load CSV data with `d3.csv`, then renders SVG rectangles scaled using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Orange gridlines and text labels are generated from `xScale.ticks()`, with the chart styled by CSS.

AI-generated description

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

See also React Starter.