Chinese Companies Dashboard

Fork of React & D3 Vibecoding Starter

This example visualizes the top Chinese companies by market capitalization, with a bar chart sorted by value and color-coded by sector. Selecting a bar highlights that company while dimming others, and hovering reveals tooltips with details like IPO year, IPO value, and growth since IPO. Built with React and D3 v7, it uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` for layout, plus `ResizeObserver` for responsive sizing. The data comes from a CSV file and interacts through React state management and D3 selections.

95% match

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`.

82% match

Fork of React & D3 Vibecoding Starter

82% match

Fork of Fork of React & D3 Vibecoding Starter

This dashboard compares market share among AI platforms through two interactive donut charts, one for chatbots and one for search engines, using visit data from 2023-2025. Users can filter by platform type, sort by visits, year-over-year change, or name, and limit the displayed entries. Built with React and D3 v7, it uses d3.pie, d3.arc, and ResizeObserver for responsive SVG rendering, with tooltips showing visit counts, previous year figures, YoY change, and percentage share of each platform type.

82% match

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 interactive dashboard visualizes total traffic to twenty AI platforms from April 2024 to March 2025, distinguishing chatbots from search engines through color-coded bars. Users can filter by platform type, sort by visits or year-over-year change, limit displayed entries, and toggle YoY indicators. Built with React 18 and D3 v7, it renders SVG charts with animated transitions, featuring interactive tooltips, hover effects, and a reset button. Data loads from a local CSV file, while ResizeObserver handles responsive scaling of the visualization.

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.