Untitled

Untitled

This example shows a scatter plot of 2018 movies, comparing their box office gross (x-axis) against their IMDb rating (y-axis). Each point is labeled with the movie title, and annotations in the four corners categorize the data into groups like "Higher Grossing, Higher Rating." The chart is built with Wijmo’s FlexChart, using an annotation layer for text callouts. Tooltips display the movie’s gross and rating, while the axes have custom origins and hidden labels to declutter the visualization.

CCarloWK1202

76% match

Movie Genre, Rating and Budget

This visualization displays movies as bubbles in a force-directed chart, with each bubble’s position along the x-axis encoding IMDB rating and its y-axis position encoding genre. Bubble size represents the movie’s budget, and color encodes the rating value. The chart uses the `d3.forceChart()` plugin, which is built on `d3.layout.force`, to gently shift bubbles toward their target x and y positions while preventing overlaps through collision detection. Data comes from the ggplot2 `movies` dataset, filtered to include only post-2000 films with budget and rating information, and rendered as SVG circles.

FFrissAnalytics

73% match

Bubble Chart Experiment

This bubble chart visualizes the 2017 domestic box-office performance of 65 films, mapping each movie as a circle positioned by release date (x-axis) and box office rank (y-axis). Circle size encodes total gross, while color distinguishes studio categories. Hovering or interacting triggers smooth SVG transitions, updating positions and sizes to reveal additional attributes such as runtime, theater count, or audience rating. The chart animates between these categorical views, with tooltips showing title, studio, gross, and opening weekend values. The visualization uses a force-directed layout to avoid overlaps and makes it easy to spot outliers and trends across the year's release schedule.

335degrees

72% match

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.

72% match

Bubble Chart of Highest Grossing Movies

This interactive bubble chart displays the top 10 highest-grossing movies from an IMDB dataset, with circles sized by gross revenue and colored on a gradient from light pink to dark red. The visualization uses D3’s `forceSimulation` with charge, center, and collision forces to position the bubbles, and includes draggable circles with labels showing each film’s title. A dropdown filter allows users to select a director, updating the simulation with only that director’s movies. Tooltips and dynamic styling enhance the exploration of the data.

RRuba Khan

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.

Week 14: IMDB Top 250 Movies – Interactive Visualization Dashboard

This interactive dashboard visualizes IMDB's top 250 movies across five linked charts, including scatter plots, stacked bars, a genre bar chart, and a hierarchy tree. Users filter by decade and toggle regression or trend lines while hovering over genres in the legend to highlight specific categories. Built with React and D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `hierarchy`, `tree`, and `linkHorizontal` APIs. The dataset comes from a Kaggle compilation of IMDB ratings, budgets, runtimes, and genres. Interactive controls include dropdowns, buttons, and zoomable tree navigation with tooltips.

Fork of Week 5: IMDB Top 250 Movies Bubble

This scatterplot visualizes IMDB’s Top 250 movies, plotting each film’s release year on the x-axis against its runtime in minutes on the y-axis. Circle size encodes the movie’s rating, while color distinguishes its primary genre. The visualization uses D3 v7 scales including `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for positioning, radius, and categorical coloring, with React managing the SVG lifecycle. Data is loaded from a CSV file and filtered to exclude missing values before rendering.