Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

b1ba8c2a72ae480880cf0ebb8a72879b

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

0 stars0🌍 Public
AAniv Chakravarty
Last edited Mar 7, 2023
Created on Mar 7, 2023

This example shows the relationship between customer age and annual income using a horizontal bar chart of the first 15 records from a CSV dataset. Each bar’s length encodes income via a linear scale, while age categories are positioned on a band scale. The visualization is built with React components that render SVG marks, using D3 v5 utilities like `scaleLinear`, `scaleBand`, and `max` for data processing and scaling. Grid lines and axis ticks are generated from the linear scale’s tick values, with the dataset loaded asynchronously via `d3.csv`.

AI-generated description

A bar plot of customer age to Annual Income.

Data: Customer Data.