Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Activity 7

Public visualization

Viewing a saved revision (read-only)

6cae689d03aa4bdab73fc6a155aded91

Activity 7

0 stars0🌍 Public
Bbogasamudramvamsikrishnareddy
Last edited Jul 21, 2023
Created on Jul 21, 2023

This example shows a horizontal bar chart of product sales, using a categorical y-axis for product names and a linear x-axis for sales values. It renders with React and SVG, using D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `format` APIs to load and scale data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and rectangular marks, with native SVG `<title>` elements providing tooltips. The data is filtered to the top seven products, and sales values are formatted with a compact SI prefix.

AI-generated description

A demonstration of how to start using D3 version 6.