Viewing a saved revision (read-only)
ea4571d3bf1041bbb76b44dccdf6dbd1
My view on IMDB Top 250 Movies Bar Chart: Genre VS Count
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.