Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
XXiaojun
Last edited Sep 29, 2025
Created on Sep 29, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
97% 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 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 12: IMDB Top 250 Movies Histogram: Distribution of Movie Runtimes by Genre

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.”

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
91% match
Loading thumbnail…

Week 6: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

This bubble chart displays IMDB’s top 250 movies, plotting each film’s release year against its runtime in minutes, with bubble size encoding rating and color representing the seven most common genres. The visualization uses D3 scales, including `scaleLinear` and `scaleOrdinal` with `schemeSet2` for categorical coloring. React manages the data-loading lifecycle, while D3’s `select` and `join` methods handle SVG rendering and updates. The chart includes labeled axes with formatted ticks, a legend, and a title, all positioned within configured margins.

XXiaojun
85% match
Loading thumbnail…

Week 9: IMDB Top 250 Movies Movie Bubble Chart: Movie Runtime Trends Over Time

This bubble chart displays the relationship between the release year and runtime of the top 250 IMDB movies, with each bubble’s size representing its rating and its color indicating a simplified genre. The visualization reveals a general trend of increasing movie runtimes over time. It uses a React frontend with d3.v7’s `scaleLinear`, `scaleOrdinal`, and `axisBottom` to map data. Data is preprocessed from a CSV file, with runtimes parsed from strings like “2h 22m” into minutes. The genre legend allows interactive highlighting, filtering bubbles by genre on click or hover.

XXiaojun
85% 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
84% match