Skip to main content
SimilarExport ZIP
100%

Week 12: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

✓ Published0🌍 Public
XXiaojun
Last edited Nov 10, 2025
Created on Nov 10, 2025

This stacked histogram shows the distribution of movie runtimes across the top 6 genres in the IMDB Top 250 list, with each bar broken into colored segments for genres like Drama, Crime, and Action. The chart uses D3 v7's `scaleLinear`, `scaleOrdinal` with `schemeSet2`, and `bin` functions on a 10-minute interval to aggregate data parsed from a CSV. The React app loads the dataset, filters out null runtime values, and categorizes movies without a top genre as “Other.”

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Week 11: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This histogram shows the distribution of movie runtimes for the top 250 IMDB movies, broken down by genre with stacked bars at 10-minute intervals, distinguishing the six most frequent genres from an "Other" category. The chart uses D3 v7’s `bin` and `scaleLinear` functions to create and scale the bins, while `scaleOrdinal` with `schemeSet2` applies colors. Data comes from a CSV file containing runtime, genre, and other movie attributes, parsed into minutes and genre lists by a custom parser.

XXiaojun
96% match
Loading thumbnail…

Week 10: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This histogram visualizes the distribution of movie runtimes for the top 250 IMDB movies, broken down by genre as a stacked bar chart. Using D3.js and React, the visualization filters the data to the six most common genres, categorizes all others as "Other," and bins runtimes into 10-minute intervals. Each bar segment is colored via `d3.scaleOrdinal` and `d3.schemeSet2`, with axes rendered by `d3.axisBottom` and `d3.axisLeft`. The chart reads from a CSV file containing movie metadata.

XXiaojun
96% match
Loading thumbnail…

Week 9: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This stacked histogram visualizes the distribution of movie runtimes across the top six most frequent genres from the IMDB Top 250 dataset, using 10-minute bins. It shows how each genre's movie count contributes to the total for each runtime interval. The visualization uses D3's `scaleLinear`, `bin`, and `scaleOrdinal` APIs to create the bars, with categories sorted by frequency and an "Other" grouping for remaining genres. The legend identifies color assignments for each genre.

XXiaojun
96% match
Loading thumbnail…

Week 6: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

This visualization shows the distribution of movie runtimes across the top 6 genres in the IMDB Top 250 list, using stacked histograms to display genre frequency within 10-minute runtime bins. The code uses React with D3 v7, employing `d3.bin` for binning, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for genre colors. Runtime data is parsed from the CSV's `run_time` field, and genres are categorized with an "Other" fallback.

XXiaojun
95% match
Loading thumbnail…

Week 5: IMDB Top 250 Movies Histogram: Movie Runtime Distribution

This histogram visualizes the distribution of runtimes for IMDB's Top 250 movies, using 20-minute bins to show the frequency of films across different durations. The visualization is built with React and D3 v7, employing `select`, `scaleLinear`, `extent`, `max`, and `bin` from the D3 API to bin the data and map values to screen coordinates. It plots a green bar chart with labeled x-axis (run time in minutes) and y-axis (frequency), with axes rendered via `axisBottom` and `axisLeft`. The dataset, sourced from Kaggle's IMDB Top 250 Movies list, is parsed from CSV using a custom runtime parser to convert time strings to numeric minutes.

XXiaojun
89% match
Loading thumbnail…

Week 5: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart visualizes the distribution of genres among IMDb’s Top 250 movies, showing how many films fall into each genre category. Using D3.js v7 within a React component, the code loads movie data from a CSV file, splits each movie’s comma-separated genre list, and counts occurrences to create the dataset. The chart employs scaleBand and scaleLinear for positioning, with bars colored via a linear color gradient from light to dark blue. The y-axis represents genre counts, while rotated labels on the x-axis identify each genre.

XXiaojun
86% match
Loading thumbnail…

Week 6: IMDB Top 250 Movies Bar Chart: Genre VS Count

A bar chart visualizes the distribution of genres among the IMDb Top 250 movies, with each bar's height representing the count of movies in that genre and a tooltip showing the exact count and percentage. The visualization uses the D3.js library, including `scaleBand` and `scaleLinear` for axes and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file, and genres are split and counted from a comma-separated field. The chart uses a Seaborn-derived color palette with interactive hover effects that highlight the selected bar and dim others.

XXiaojun
85% match
Loading thumbnail…

Week 12: IMDB Top 250 Movies Bar Chart: Genre VS Count

This bar chart visualizes the distribution of genres among IMDb’s Top 250 movies, showing that a single film can be counted under multiple genres. The visualization counts genres from the loaded CSV data and sorts them in descending order. It uses D3.js v7 scales, axes, and SVG elements to render the chart, with a Seaborn-derived color palette and hover interactions that dim non-target bars and display a tooltip with the count and percentage for each genre.

XXiaojun
85% match