Skip to main content
100%

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 description

IMDb 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

  1. Open index.html in a modern web browser
  2. Use the search box to filter genres (e.g., "Drama", "Action", "Sci-Fi")
  3. Hover over bars to see detailed statistics
  4. 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

Similar vizzes