Interactive Galaxy Visualization

Fork of React & D3 Vibecoding Starter

This visualization displays an animated SVG path sourced from a single CSV record, rendered on a clean white card with a drop shadow. The path is parsed for coordinates, scaled, and centered within a responsive container. Using D3 transitions, the stroke draws itself smoothly over 2.5 seconds with a glowing shadow effect. Built with React 19 and D3 v7, the code leverages `useDimensions`, `ResizeObserver`, D3 selections, and `transition` APIs for the animation.

79% match

Fork of React & D3 Vibecoding Starter

A three-dimensional heart rotates continuously within a responsive SVG container, its layered shapes creating a sense of depth and volume. The animation, driven by an animation frame loop in D3.js, updates a rotation angle that shifts each of the 20 heart-shaped paths horizontally and vertically. D3's `select`, `rgb`, and SVG path rendering construct the visual, while React's `useRef`, `useEffect`, and `useState` manage the container dimensions and animation state. The heart's colors and stroke opacity vary by depth to enhance the 3D effect.

Fork of React Starter

An interactive circular heatmap visualizes daily birth counts for 2024, with colored dots orbiting a pulsing center circle. The visualization uses a D3.js v7 SVG animation to map birth data from a CSV file, encoding values through color gradients and glow effects. Hovering over data points reveals details via React state management, while CSS transitions and D3's ease functions create smooth orbital movement.

Cchynnerio@gmail.com

Fork of React Starter

Cchynnerio@gmail.com

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency of letters from a CSV data source, with bars that can be clicked to highlight or dim selections. The visualization uses React 19 to manage state and render the UI, while D3 v7 handles the SVG rendering, scales, axes, and bar elements. The chart includes interactive features such as hover effects and click-to-select, with smooth CSS transitions on bar fill and opacity. Data loading uses D3's `csv` parser, and the SVG is drawn with responsive dimensions tracked via a `ResizeObserver`.

Fork of React & D3 Vibecoding Starter

Fork of React & D3 Starter

This interactive particle constellation visualizes 100+ colored particles that move with physics-based velocity, bounce off screen edges, and connect to nearby particles with fading lines. Particles are attracted to the mouse cursor, growing larger when approached. Built with React 19 and D3.js v7, the example uses d3.interpolateRainbow for gradient colors and requestAnimationFrame for smooth 60fps animation. Live sliders adjust particle count and connection distance, while a "Regenerate" button randomizes positions and colors through React state management.

Fork of React & D3 Vibecoding Starter

A static bar chart displays letter frequencies from a CSV file, with bars in teal that highlight and dim upon selection. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks and gridlines, and a `ResizeObserver` to adapt the SVG to container dimensions. Clicking a bar toggles its selected state, which adjusts fill color and opacity.

BBHUMIKA CHUNDU