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)

5209b62f32724959a0805ab3c293cc6b

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

0 stars7🌍 Public
AAnanthulaaditya
Last edited Jun 26, 2022
Created on Jun 24, 2022
Forked from Cat smiley

This example displays country-wise basic internet costs as a horizontal bar chart, loading data from a CSV file and rendering it as SVG marks. The React component uses state and effects to fetch and parse the data, while D3’s `scaleBand` and `scaleLinear` map country names and cost values to pixel positions. Axes are manually constructed using array mappings for ticks and labels, with rectangle elements representing each bar. The visualization integrates React’s declarative rendering with D3’s scaling utilities, demonstrating a hybrid React-and-D3 approach for static chart generation.

AI-generated description

A whole smiley face