Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React & D3 Vibecoding Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

1b6d3ace4b6e4e4d9ff3fbd6bc809811

Open

React & D3 Vibecoding Starter

1 star199🌍 Public
CCurran Kelleher
Last edited Jun 12, 2025
Created on Mar 17, 2025

This example shows an interactive bar chart of letter frequencies from a CSV file, rendered in React with D3.js. The visualization updates responsively to window resizing via ResizeObserver and allows hover to change bar color and click to select or deselect bars. The code demonstrates a modular architecture where React manages state and component lifecycle, while D3 handles SVG rendering, scales, and axes through its `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs.

AI-generated description

React & D3 Demo

A simple demonstration of React and D3 working together to create responsive visualizations.

This demo shows:

  • Using React for component management
  • Using D3 for SVG manipulation
  • Making visualizations responsive to window size
  • Simple animation effects on hover

Built with React and D3.