Housing Market Comparison Visualization

Fork of Vanilla D3 Vibecoding Template

A grouped bar chart compares housing market metrics between March 2024 and March 2025, showing absolute values for six categories alongside color-coded percentage changes. The d3.scaleBand and d3.scaleLinear APIs position bars and axes, while value labels format prices with dollar signs and mortgage rates with percent symbols. A legend distinguishes the two years, and positive or negative trends appear as green or red arrows using SVG text elements. The chart includes title, subtitle, and source attribution within the SVG canvas.

Fork of React & D3 Vibecoding Starter

This example shows a simple bar chart of letter frequencies from a small CSV dataset. The chart uses a React component with hooks and a ResizeObserver for responsive dimensions. D3’s scaleBand and scaleLinear create the scales, while axisBottom and axisLeft render axes with gridlines. Clicking a bar toggles a selected state, changing its fill and opacity through transitions. The code integrates D3 selections with React state management, using modular rendering functions for the SVG, title, bars, and data loading.

Fork of React & D3 Vibecoding Starter

This example demonstrates a clean, interactive bar chart built with React and D3.js (v7). It visualizes a small dataset, showing the frequency of letters from a CSV file, with bars for each letter. The chart allows users to click on individual bars to highlight and dim others, creating a selection state. It is built by combining React's component model for state management and DOM control with D3's `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs for rendering and layout. The visualization is fully responsive, using a `ResizeObserver` to recalculate dimensions.

GGabriel Dantas

Fork of React & D3 Vibecoding Starter

This bar chart displays the frequency distribution of letters from a small CSV dataset. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars along categorical and numeric axes, with `axisBottom` and `axisLeft` rendering ticks and gridlines. Clicking a bar toggles its selection, changing its fill color and dimming others via a `ResizeObserver`. The chart re-renders responsively through React state management and D3’s data join pattern.

Fork of React & D3 Vibecoding Starter

This example shows a bar chart of letter frequencies from a small CSV dataset. A React component manages the chart's container and state, while D3 v7 functions handle the core rendering: `scaleBand` and `scaleLinear` create the axes, `axisBottom` and `axisLeft` draw them, and `renderBarElements` builds the interactive bars. Clicking a bar toggles its selection, changing its fill color and the opacity of others. The chart is responsive, using a `ResizeObserver` to update dimensions.

Fork of React & D3 Vibecoding Starter

A dashboard displays the top 25 New York counties by value for a selected year, shown as horizontal dot plot bars. Users switch between 2012–2015 data via clickable year buttons, and clicking a dot highlights that county. The React app uses D3 v7’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart, while a `ResizeObserver` tracks container dimensions. Data loads from a CSV file and updates reactively through `useEffect` hooks.

Fork of React & D3 Vibecoding Starter

This bar chart traces the shrinking feature size of semiconductor devices from 1966 to 2021, with each bar representing a specific processor or logic chip. A logarithmic y-axis scales the nanometer values, while hovering or clicking a bar highlights the selected device. The visualization combines React state management with D3 v7 for rendering, using `d3.scaleBand` and `d3.scaleLog` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and CSS transitions for interactive feedback. Data is loaded from a CSV file.

SSainathreddypotu@gmail.com

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays letter frequency data from a CSV file, with clickable bars that highlight and dim based on user selection. Built as a React and D3.js integration, it uses `ResizeObserver` for responsive dimensions, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes with gridlines. The bars feature smooth color and opacity transitions, with a static title and axis labels rendered via D3 selections.