Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: Rendering Marks and Channels (Bar Chart)

Public visualization

Viewing a saved revision (read-only)

5586e48cae334c75932e1c6cd447c00b

ICE-6: Rendering Marks and Channels (Bar Chart)

0 stars18🌍 Public
Ggeethikal
Last edited Mar 10, 2023
Created on Mar 10, 2023
Forked from HTML Starter

This example renders a horizontal bar chart using React and D3 v5, displaying the 2022 population for three countries from a CSV dataset. The visualization uses SVG marks and channels, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React state manages the asynchronous CSV loading via D3’s `csv` function, while the code manually draws axis ticks, gridlines, and colored rectangles. The chart includes a purple vertical grid and labeled axes, with data filtered to the first three rows of the source CSV.

AI-generated description

A bare minimum HTML page.