Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published2🌍 Public
NNita
Last edited May 6, 2025
Created on May 6, 2025

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.

AI-generated description

AI Platforms Comparison Interactive Dashboard

This visualization is an interactive dashboard comparing total visits of various AI platforms, including both chatbots and search engines, for the period of April 2024 to March 2025.

Features:

  • Interactive bar chart comparing total visits
  • Color-coding to distinguish between chatbots and search engines
  • Tooltips showing additional information like year-over-year change
  • Filter by platform type (Chatbots or Search Engines)
  • Sort by visits, YoY change percentage, or platform name
  • Limit number of platforms displayed
  • Option to show year-over-year change visualization
  • Animated transitions between different views
  • Interactive platform selection for focus
  • Reset button to clear all filters and selections

Data Source:

The data includes traffic statistics for major AI platforms including ChatGPT, Google, Bing, and others.

Dashboard Controls:

  • Platform Type Filter: Show all platforms, chatbots only, or search engines only
  • Sort By: Sort platforms by total visits, YoY change percentage, or name
  • Show Top: Limit the number of displayed platforms to 5, 10, or 20
  • Year-over-Year Change: Toggle visualization of YoY growth/decline
  • Reset All: Button to reset all filters and selections to default values

Visualization Elements:

  • Color-coded bars represent different platform types
  • Bar height represents total visits
  • YoY indicators show change from previous year
  • Grid lines help with value comparison
  • Hover effects for improved user interaction
  • Responsive design adapts to different screen sizes
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

NNita
92% match
Loading thumbnail…

Fork of AI Platform Dashboard analysis

This dashboard compares AI platform usage across April 2023–March 2025 using six visualization types: bar charts, grouped bars, line charts, pie charts, scatter plots, and a treemap. Built with React and D3 v7, it renders SVG with animated transitions, interactive tooltips, and controls for filtering by platform type, sorting, limiting data, and highlighting selected platforms. The data, loaded from a CSV via d3.csv, shows visit counts and year-over-year changes for chatbots and search engines.

NNita
87% match
Loading thumbnail…

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

NNita
83% match
Loading thumbnail…

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

NNita
83% match
Loading thumbnail…

AI Platform Dashboard analysis

An interactive bar chart compares total visits for AI platforms across chatbots and search engines for 2024-2025. Users can filter by platform type, sort by total visits or year-over-year change, and toggle to show previous year indicators. Built with React and D3 v7 (including `scaleBand`, `scaleLinear`, and `scaleOrdinal`), it renders as animated SVG bars with hover tooltips and legend-based filtering, with data loaded from a CSV file.

NNita
83% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays the frequency of letters in a small dataset, rendered with React and D3. The visualization updates dynamically as users click bars to filter and highlight specific categories. Built with React 19 and D3 v7, the code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart. A `ResizeObserver` tracks container dimensions, while the `csv` API loads the sample data. The chart uses the `join` pattern for declarative SVG updates, with CSS transitions for smooth hover and selection effects.

Ddr_nareshvet@yahoo.in
82% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays the frequency of letters in a small dataset, rendered with React and D3. The visualization updates dynamically as users click bars to filter and highlight specific categories. Built with React 19 and D3 v7, the code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart. A `ResizeObserver` tracks container dimensions, while the `csv` API loads the sample data. The chart uses the `join` pattern for declarative SVG updates, with CSS transitions for smooth hover and selection effects.

Ddr_nareshvet@yahoo.in
82% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This is an interactive bar chart that visualizes the frequency of letters in a dataset loaded from a local CSV file. The chart uses SVG bars with rounded corners and a color gradient, where clicking a bar toggles a selected state that highlights the bar and dims others. Built with React and D3 v7, it uses `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to create the scales and axes, with a `ResizeObserver` in a custom `useDimensions` hook to make the visualization responsive.

Aankitgoudpoodhari07@gmail.com
81% match