Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

f5e001ad1eed4701ad8ce0b6846963d7

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

1 star4🌍 Public
RRamakanth771
Last edited Mar 7, 2022
Created on Mar 5, 2022

This visualization displays the top 10 highest-grossing films in USD using horizontal bars rendered as SVG rectangles. The React component loads CSV data via d3.csv, then uses d3.scaleBand for the y-axis film labels and d3.scaleLinear for the x-axis gross values. Ticks and axis labels are generated from xScale.ticks(). The bar chart updates asynchronously, showing a loading state until data arrives.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.