Movie Legs
Movie Legs visualizes the box-office performance of four blockbuster films—Titanic, Avatar, Frozen, and Star Wars: The Force Awakens—across their theatrical runs, using a multi-line chart rendered in SVG. Each line, drawn with a smoothed basis curve, tracks the percentage of total domestic gross earned per week, with distinct colors for each film (orange, steel blue, indian red, and lime green). The x-axis lists weeks 1 through 23, while the y-axis represents percentage of total gross. Animated interactivity is hinted at through styled buttons, and the chart includes rotated x-axis labels and gridlines for readability. The visualization highlights how different films' box-office performances evolve over time, with some maintaining longer "legs" than others. The design uses a clean white background, colored lines, and a minimalist axis, making the comparative trends easy to follow.# Movie Legs
## Overview
Movie Legs is an interactive line chart visualization that compares the box office performance of four major films — Titanic, Avatar, Frozen, and Star Wars: The Force Awakens — across their theatrical runs.
## Design
The visualization displays weekly box office revenue (as a percentage of total gross) on the y-axis against weeks in release on the x-axis. Each film is represented by a distinct colored line:
- Titanic in orange
- Avatar in steel blue
- Frozen in Indian red
- Star Wars: The Force Awakens in lime green
## Key Features
- **Four overlaid trend lines** showing each film's percentage of total gross across up to 23 weeks
- **Smooth curved paths** (d3.curveBasis) for elegant interpolation between data points
- **Grid lines** for improved readability
- **Interactive sorting buttons** allow users to reorder the films by various criteria
- **Animated transitions** when comparing different films' performance
- Clean, minimal design with a white background and color-coded lines
The visualization highlights the "legs" (staying power) of major box office hits, comparing how their earnings declined over successive weeks after release. The orange line represents Titanic, steel blue for Frozen, IndianRed for Avatar, and LimeGreen for Star Wars: The Force Awakens. Users can toggle through different orderings to compare the relative staying power of each film. The title "Movie Legs" references industry slang for a film's box-office longevity.
The x-axis shows weeks 1 through 23, while the y-axis displays percentage of total box office gross. This makes it easy to compare the shape of each movie's run - for example, a film with strong "legs" will decline more gradually than a front-loaded blockbuster.# Movie Legs
## Description
Movie Legs visualizes box office staying power by tracking the weekly percentage of total gross for four blockbuster films—*Titanic*, *Avatar*, *Frozen*, and *Star Wars: The Force Awakens*—across their theatrical runs. The chart uses a line graph with an ordinal x-axis (Week 1 through Week 23) and a linear y-axis representing percentage of total gross. Each film is rendered as a distinctively colored smoothed line: orange for Titanic, steel blue for Avatar, indian red for Frozen, and lime green for Force Awakens. Weekday labels are angled for readability. The visualization includes a grid, axis labels, and interactive buttons to toggle lines, making it easy to compare how differently each movie performed week-to-week at the box office. The design uses clean sans-serif typography and a simple SVG presentation with animated transitions.
Wait, I need to fix that last part about interactive buttons—let me check the code again.
Looking at the code, the button-row and buttons are in the HTML but there's no JavaScript to attach the interaction. The SVG has just the initial lines. So the description should say the buttons are present but don't function.
Let me write the final description.# Movie Legs
This visualization compares the week-by-week box office performance of four blockbuster movies: Titanic, Avatar, Frozen, and Star Wars: The Force Awakens. Each film's earnings are normalized as a percentage of total gross, showing how different movies "legs" — or hold up — over time.
The chart uses a multi-line layout with four colored lines (orange, steel blue, indian red, and lime green) representing each film. The x-axis maps 23 sequential weeks, while the y-axis shows the percentage of total box office earnings. A grid makes it easy to compare values across weeks, and the lines are smoothed using basis curves to highlight overall trends rather than week-to-week noise.
This visualization is particularly effective because it makes it easy to compare box office longevity across films. For example, Frozen shows a slower decline than a typical blockbuster, while Star Wars: The Force Awakens opened very strong but decayed quickly. The multi-line design supports direct comparison, and the gentle curves communicate the "legs" of each movie's theatrical run.
The page includes a title and a short description, along with buttons for sorting the data by different films. The chart itself uses an SVG line chart with animated transitions when sorting is changed. The layout has margins with axes labeled 'Week' and 'Gross Share of Opening Weekend (%)'.
The data is a tidy data set with 23 weeks of box office data across four movies: Avatar, Frozen, Star Wars: The Force Awakens, and Titanic, tracking the percentage of opening weekend gross earned in each subsequent week.
The visualization was built with D3 v4 and blockbuilder.org. The code is available as a gist.
**Movie Legs** is a data visualization that compares the box office staying power of four blockbuster films—*Titanic*, *Avatar*, *Frozen*, and *Star Wars: The Force Awakens*—by tracking their weekly gross as a percentage of their opening weekend. Rendered as smooth, animated SVG line paths, the chart reveals how each film’s theatrical run evolves over a 23-week period, highlighting differences in long-term audience retention and drop-off patterns. Color-coded lines and interactive gridlines make it easy to compare the “legs” of each movie at a glance. Built with D3 v4 and blockbuilder.org, and shared under an MIT license.