Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

Viewing a saved revision (read-only)

3fae5456347143c4b01296d41d19b153

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

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

This example shows a horizontal bar chart of anime ratings using a bar mark for each entry, with the x-axis encoding numeric values and the y-axis encoding categorical names. The visualization renders as SVG using React components for marks and channels, while D3’s `scaleBand` and `scaleLinear` compute the positions and sizes. Data loads from a CSV file via `d3.csv`, and the chart includes axis ticks and labels drawn manually with SVG elements. The code demonstrates a hybrid approach where React manages the DOM and D3 handles scales and data parsing.

AI-generated description

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

See also React Starter.