Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart with real data

Public visualization

Refactored Bar Chart with real data

0 stars1🌍 Public
GGayan Priyadarshana
Last edited Aug 2, 2023
Created on Aug 2, 2023
Forked from Hello VizHub

This example displays a horizontal bar chart of closing values for ten products, using data loaded from a CSV file. Built with React and rendered as SVG, it partitions the visualization into modular components: the `AxisBottom` and `AxisLeft` handle ticks and labels, while `Marks` draws each rectangle. D3’s `scaleBand` and `scaleLinear` map the categorical and numeric fields, and dimensions are scaled relative to a fixed margin. The chart loads real data via D3’s `csv` method, demonstrating a reusable, refactored structure.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed