Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Viewing a saved revision (read-only)

4bfc1aec7e6c4ae1a4f7128d8df5e34c

Refactored Bar Chart

0 stars1🌍 Public
JJames Rhodes
Last edited Feb 19, 2022
Created on Feb 19, 2022

This example displays a horizontal bar chart ranking the ten most populated countries for 2020, sourced from a UN population CSV. The React app uses d3.csv for loading and parsing data, with d3.scaleBand and d3.scaleLinear for positioning bars along the y- and x-axes respectively. Axes and marks are rendered as separate React components producing SVG elements, with the chart area defined by explicit margins within an svg of fixed dimensions.

AI-generated description

Example of visualising data using React and D3

data MDN: CSS Colors