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)

45cea245b7364f6a94f0e118d7be82c4

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

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

This visualization displays a horizontal bar chart of bicycle prices for various countries, using a curated dataset loaded from a CSV file via d3.csv. The chart maps country names to a d3.scaleBand y-axis and numerical prices to a d3.scaleLinear x-axis, rendering rectangles as marks with blue gridlines and tick labels for both axes. Built with React components and D3 scales, the SVG output uses React’s state and effect hooks to fetch and process data, while D3’s scale functions handle positional encoding. The visualization highlights how D3 and React integrate for declarative chart rendering.

AI-generated description

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

See also React Starter.