Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published1🌍 Public
NNita
Last edited May 16, 2025
Created on May 16, 2025

This interactive bar chart displays the number of community solar sites operated by different providers in New York, based on a local CSV dataset. It uses React with D3 v7 to render the visualization, leveraging the `join()` API for SVG element creation. The chart features horizontal axis labels, count labels on bars, and interactive click behavior that highlights a selected provider and displays their website and sample locations in an info panel.

AI-generated description

Community Solar Providers Visualization

This visualization shows the number of solar sites operated by different community solar providers in New York state. The data is sourced from a CSV file containing information about solar providers, their locations, and utility companies.

Features:

  • Bar chart showing the number of solar sites by provider
  • Interactive - click on a bar to see details about a specific provider
  • Shows provider website and sample locations when a provider is selected
  • Responsive design that adapts to window size

Technologies:

  • React for application framework
  • D3.js for data visualization
  • CSS for styling
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive map and bar chart displays community solar providers across New York State. The visualization shows a map of solar site locations alongside a bar chart counting sites per provider. Users can click bars to filter the map and view provider-specific site details. The project uses React for state management, D3 v7 for rendering with `geoMercator` and `geoPath`, and loads location data from CSV and TopoJSON files.

NNita
94% 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
85% 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
85% match
Loading thumbnail…

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.

NNita
84% match
Loading thumbnail…

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.

NNita
84% match
Loading thumbnail…

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.

NNita
83% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive line chart shows the change in a value across New York counties from 2012 to 2015. Users can click on a line or legend item to highlight a specific county and dim the others. Built with React and D3 v7, the visualization loads data from a CSV and uses a monotone cubic curve, a linear y-scale, and a legend to display all counties at once.

NNita
83% match
Loading thumbnail…

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
83% match