My view on IMDB Top 250 Movies Bar Chart: Genre VS Count
✓ Published0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Nov 18, 2025
Created on Nov 18, 2025
This interactive bar chart visualizes the distribution of genres within IMDb’s Top 250 movies, allowing users to filter the displayed categories via a text input. Built with React and D3.js, the visualization uses `scaleBand` and `scaleLinear` to map genres and counts, while `transition` calls animate bar height changes. Hovering over a bar reveals a tooltip with the genre’s count and percentage. The chart reads from a local CSV file and updates responsively, with axes rendered via `axisBottom` and `axisLeft`.
AI-generated descriptionIMDb Top 250 Movies: Genre Distribution
An interactive data visualization exploring genre distribution across IMDb's Top 250 movies.
Features
- Animated Transitions: Smooth bar chart animations when data updates
- Interactive Search: Real-time genre filtering with search functionality
- Color-Coded Bars: Modern gradient color scheme (purple to violet)
- Rich Tooltips: Hover to see detailed statistics including count and percentage
- Responsive Design: Automatically adapts to different screen sizes
- Modern UI: Clean, card-based layout with gradient background
Technologies
- React 19
- D3.js 7.9
- ES Modules
- Pure CSS styling
How to Use
- Open
index.htmlin a modern web browser - Use the search box to filter genres (e.g., "Drama", "Action", "Sci-Fi")
- Hover over bars to see detailed statistics
- Watch as bars animate smoothly when filtering
Data Source
Data from IMDb Top 250 Movies, including genres, ratings, and metadata for each film.
MIT Licensed