Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Rendering Data with React & D3 - barchart Axis

Public visualization

Viewing a saved revision (read-only)

ee977573c0eb4dd4baaa141804d76b94

Fork of Rendering Data with React & D3 - barchart Axis

0 stars1🌍 Public
Kkeitheade
Last edited Nov 4, 2021
Created on Nov 4, 2021

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from a UN population CSV. It demonstrates a hybrid approach where React (16.13.1) manages the component structure and state, while D3 (v7.1.1) provides the `scaleBand`, `scaleLinear`, and `max` functions for chart layout. The chart renders as SVG with axes: x-axis ticks and labels generated from `xScale.ticks()`, and y-axis country labels positioned using the band scale. The bars themselves are drawn as `rect` elements, with their widths and heights computed from the data and scales.

AI-generated description

React Starter code.