Movie Genre, Rating and Budget

Bubble Chart Experiment

This bubble chart experiment visualizes box office performance data for 2017 films, using SVG and animation to explore the relationship between release date, budget, and revenue. The chart displays circles of varying sizes representing each film's box office gross, with position encoding opening and closing dates along the x-axis. As the animation plays, bubbles are sorted by rank and gently transition horizontally, making it easy to compare the relative commercial success of different movies across categories like studio and distributor. The view is built with D3 v4 and rendered entirely in SVG, with smooth animated transitions that invite the user to explore the dataset dynamically.

Gist 084750a10fa41a3849235a117dec0b7b

This visualization plots movie production budget against box office earnings, with each film’s genre, ROI, and IMDb rating encoded through color, size, and position. Using a scatterplot rendered with D3.js, it employs `d3.forceSimulation` to arrange overlapping points and `d3.scaleOrdinal` for genre-based coloring. Data comes from the included `movies.csv` file, with axes scaled linearly to handle outliers like *Avatar* and *ET*.)

CCarlosVelamazan

fresh block

This bubble chart visualizes the relationship between a movie’s budget and its gross earnings, with point size encoding gross revenue in millions and color hue representing the MPAA rating (e.g., R, PG-13). The D3.js v3 code loads data from a TSV file, uses linear scales for both axes, and applies a square-root scale to map gross to radius. Interactive tooltips, provided by the d3-tip library, display the movie title and gross value on hover, while a categorical color scale distinguishes ratings in the SVG canvas.

MMrajyalakshmi

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.

Making a Bar Chart

This bar chart displays movie budgets against movie titles, with color intensity and hover interactions revealing each film’s IMDb score. A clickable green circle toggles an animation that collapses and expands all bar widths using `d3.transition` with a 1000ms duration, changing the circle’s fill from green to red or blue. The visualization is rendered as SVG using D3 v5, employing `d3.scaleLinear` for the x-axis and color, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for ticks. Data comes from a local CSV file listing budgets in dollars and IMDb scores.

HHaoYi (Karen)

Bubble Chart Experiment

This bubble chart visualizes 2017 box-office performance for 49 films, encoding each movie’s opening weekend gross (x-axis), total domestic gross (y-axis), and budget (bubble area). The dataset—sourced from a CSV of 2017 releases—includes studio, distributor, and revenue figures. Animated transitions let viewers compare how films like Wonder Woman and Kong: Skull Island cluster by performance metrics, with bubbles colored by studio and sized by box-office earnings. The chart uses SVG with D3 v4 transitions to smoothly re-position elements, making it easy to track individual movies across the field.

Bubble Chart Experiment

This example visualizes the domestic box office performance of 2017 movies as an animated bubble chart. Bubbles are positioned by release week and opening gross, with size encoding total box office and color indicating studio/distributor. Built with D3 v4 and rendered as SVG, the chart animates transitions smoothly, letting viewers track how each film's earnings accumulate week over week. The dataset is drawn from a gist by 35degrees and derived from Box Office Mojo figures.