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)

43650f72237f413cacb3b632c3a2e799

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

0 stars0🌍 Public
RReyden Harris
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example shows the price of a McDouble hamburger across fifteen US states, using horizontal bar marks to encode price along a linear scale. The chart is built with React and D3 v5, where React manages component state and SVG rendering while D3's `scaleBand` and `scaleLinear` compute positions and lengths. Data is loaded asynchronously from a CSV via `d3.csv`, and the visualization displays grid lines and axis ticks generated from the scales.

AI-generated description

CSCE 5320 Scientific Data Visualization