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)

02770c2636c24c65b22e1fe648e6bf5a

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

0 stars0🌍 Public
AAmanullah007
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example visualizes the number of gold medals won by the top ten countries in the Tokyo Olympics, using a horizontal bar chart ordered from highest to lowest medal count. The chart is rendered as SVG within a React application, with D3 v5 handling data loading via `d3.csv`, scaling through `scaleBand` and `scaleLinear`, and gridline creation with `xScale.ticks`. Each rectangular bar uses a distinct fill color from a hardcoded array, with the data sourced from a remote CSV file.

AI-generated description