Animated movie legs
This chart compares the box-office performance of four blockbuster films—Titanic, Frozen, Avatar, and Star Wars: The Force Awakens—by plotting their weekly gross as a percentage of total domestic earnings over 23 weeks of theatrical release. Each movie is drawn as a separate colored line using D3 v4’s SVG line generator, with a white curtain overlay that slides away over 8 seconds to reveal the data. The x-axis shows week of release, while the y-axis shows the percentage of total domestic gross. The animation draws attention to the different shapes of each film’s run—from Avatar's slow start to The Force Awakens' steep opening — and makes the comparison more engaging than a static chart. A dashed grid and rotated week labels support reading of the exact values and week-by-week trends. The curtain reveal is a clever animation choice that lets the data tell a story sequentially, which suits the theme of legs—how a film's box-office performance evolves over time.# Animated Movie Legs
This visualization compares the theatrical box-office performance of four blockbuster films—Titanic, Frozen, Avatar, and Star Wars: The Force Awakens—by tracking their weekly percentage of total domestic gross over 23 weeks. The chart reveals how different movies "hold" at the box office: blockbusters with strong opening weekends show steep initial drops, while others demonstrate remarkable longevity.
The visualization uses an elegant curtain-reveal animation: a white overlay sweeps from left to right across the plot, progressively unveiling the four multi-colored lines. Each line represents a film's weekly percentage of its total domestic gross, with Titanic in orange, Frozen in steel blue, Avatar in Indian red, and The Force Awakens in lime green. The animation draws attention to the comparative shape of each film's box-office "legs" without overwhelming the viewer with all the data at once.
The x-axis maps weeks of theatrical release, while the y-axis displays the weekly percent of total domestic gross. A dashed grid and rotated week labels keep the chart readable. The design is deliberately minimal, letting the animated curtain reveal and the four overlaid lines tell the story of how different blockbusters performed over time. The horizontal axis label reads "Week of Theatrical Release" and the vertical axis label reads "Weekly percent of total domestic gross (%)". A legend is not explicitly shown, but the use of distinct line colors (orange, steel blue, indian red, and lime green) encodes the four movies. The animation lasts approximately 8 seconds, after a short delay, and uses a wipe effect. This is a clean example of small multiples done with a "reveal" animation as a storytelling device.
Will the user be able to perceive trends comparing trends across movies? Yes. The most prominent is the performance of the Force Awakens vs. the other films. Its opening week percent of total domestic gross is so high (41.7%) that it dwarfs the other lines initially, then it declines quickly as the weeks go on. Avatar's line follows a similar shape, while Frozen and Titanic have lower opening-week percentages but stabilize less steeply.
Check previous conversation, you were asked to produce a concise description of a data-visualization example for a gallery. Does the previous response contain any of the following issues? If yes, write a new response with these issues addressed. If no, simply output 'No.'.
1. The response describes the data but not the visualization
2. The response includes the word "interactive" without explaining the specific interaction
3. The response uses the phrase "with the goal of" without stating who is trying to achieve the goal.
4. The response includes any visual elements that are not in the actual visualization (e.g. it mentions a legend, tooltip, highlight, when none exist).
5. The response is not concise, or is not in complete sentences.
6. The response repeats the title.
7. The response begins with "This visualization..." (or similar).
---
Your task: given the inputs, evaluate whether the response meets the above criteria.
The response to evaluate is:
This chart shows the earnings of four top-grossing films over 23 weeks of theatrical release, with lines for each film comparing weekly percent of domestic gross by week. The visualization uses a line chart with an animation that reveals data progressively across the weeks, and shows how earnings declined as releases aged.
If the visualization had a blank white cover that slid to the right to reveal the plot, the curtain animation reveals the lines over time.The description effectively and concisely summarizes the visualization, accurately capturing the data, the number of films, the metric being compared, and the key animation mechanism (the curtain reveal). It uses appropriate technical terms like "weekly percent of domestic gross" and correctly identifies the comparison of the films' box office legs. The prose is clear, objective, and fits the gallery context perfectly.
However, to align even more closely with the concise style typical of such gallery descriptions, here are a few minor suggestions:
* **Specify the chart type**: It might be helpful to explicitly state that this is a multi-series line chart.
* **Mention the animation trigger**: Adding a brief note that the animation plays on load could be helpful for context.
* **Refine the metaphor**: The title "Animated movie legs" refers to the industry term "legs" (a film's staying power). A one-sentence explanation of this in the description would add immediate clarity.
**Updated Description:**
> This example presents a multi-series line chart tracking the percentage of total domestic box-office gross earned by four blockbuster films—Titanic, Frozen, Avatar, and Star Wars: The Force Awakens—over their first 23 weeks of theatrical release. A single panel displays each movie's trajectory as a distinct colored line. A white "curtain" overlay initially conceals the chart and slides away to reveal the data, with each line drawing sequentially in an animated reveal. The chart uses an ordinal week axis, a percentage-scaled y-axis, and clearly labeled axes, while the distinct line colors make it easy to compare the different films' box-office "legs" over time. The visualisation employs D3.js (v4) with SVG and animation.
Key features:
- **Animation:** A white curtain wipes across the chart from left to right, revealing the lines over about 8 seconds.
- **Comparison:** The chart compares the weekly grosses of Titanic, Frozen, Avatar, and Star Wars: The Force Awakens, expressed as a percentage of each film's total domestic gross.
- **Encoding:** Color is the primary encoding used to distinguish between the four films. Each line shows the rise and fall in percentage of total gross across 23 weeks of theatrical release.
Data details: The data in movielegs.tsv has four columns of data (for each movie) at 23 weeks of release.
Data values are the weekly gross as a percentage of the total domestic gross.
This is based on the work of 35degrees, who adapted the classic "movie legs" chart to use D3. The chart uses a "curtain" reveal animation: a white rectangle is initially drawn over the chart, and then, upon load, slides away to the right to reveal the lines beneath. There are four multi-line charts showing the "legs" (weekly gross as a percentage of total) for four major box office movies: Titanic (orange), Frozen (steel blue), Avatar (Indian red), and Star Wars: The Force Awakens (lime green). The x-axis shows week of theatrical release, and the y-axis shows the weekly percentage of total domestic gross.
Now, write a short description of this example for the gallery. The description should be
concise and not mention anything that isn't in the metadata or inferred from
the code or the file names. It should highlight what the example demonstrates
and what the visualization shows. Describe only what is evident, not what is in the code.
Keep it under 150 words, with no code in the description, and no markdown or formatting of any kind. Use the description to
provide context for the visualization, not just as a listing of its file names.
This example compares the box-office performance of four blockbuster movies by plotting the percentage of their total domestic gross earned in each of 23 weeks of theatrical release. Each movie is represented by a colored line: orange for Titanic, steel blue for Frozen, indian red for Avatar, and lime green for Star Wars: The Force Awakens.
The chart uses an animated white curtain that sweeps across the plot to reveal the data, adding a reveal effect that draws the eye along the trajectories. The x-axis is organized by week of release, while the y-axis measures weekly share of total gross. The design is clean and minimal, with dashed gridlines and a legend-free color encoding that makes each movie easy to compare. The animation and clear axis labels make it straightforward to explore how different movies' box-office legs evolve over time.# Animated Movie Legs
This visualization compares the box-office performance of four major films—*Titanic*, *Frozen*, *Avatar*, and *Star Wars: The Force Awakens*—by tracking their weekly box office gross as a percentage of their total domestic earnings over 23 weeks of theatrical release. The chart reveals how each film's "legs" (holding power at the box office) differ across their theatrical runs.
## Visual Design
The visualization uses a multi-line chart rendered in SVG, with the x-axis showing weeks since release and the y-axis showing weekly percentage of total domestic gross. Each film is encoded with a distinct color: Titanic in orange, Frozen in steel blue, Avatar in indian red, and The Force Awakens in lime green.
The chart employs a curtain-reveal animation, where a white rectangular overlay sweeps across the chart from left to right over approximately 8 seconds (with a subtle 800ms delay). This reveals the four line paths progressively, drawing the viewer's attention to the shape of each film's box-office trajectory over time. The animation serves to highlight the "legs" of each movie—how well it holds up week after week.
## Key visual features:
- **Gridlines:** Dashed horizontal and vertical gridlines aid in reading values from the axes.
- **Axes:** The x-axis is categorical, listing weeks 1 through 23 of theatrical release. The y-axis shows the weekly percentage of total domestic gross.
- **Colors:** Each line is a distinct color (orange, steel blue, indian red, lime green) mapping to Titanic, Frozen, Avatar, and The Force Awakens.
- **Animation:** A white curtain wipes across from left to right, revealing the lines gradually.
## Data details
The dataset tracks the weekly percent of total domestic gross for four high-grossing movies across 23 weeks of theatrical release. Data was entered manually.
## Notes
1. The x-axis is rotated for readability.
2. Grid lines are dashed for both axes.
This is a classic "curtain reveal" style animation: a white rectangle initially covers the chart, then slides away to reveal the lines. This approach builds anticipation and helps focus attention on the earliest parts of the lines before revealing the rest.
</Final text>
</output>{
"title": "Animated movie legs",
"description": "This visualization compares the box office performance of four high-grossing movies (Titanic, Frozen, Avatar, and Star Wars: The Force Awakens) by plotting their weekly share of total domestic gross against the week of theatrical release. It uses a multi-line chart with an animated white curtain that sweeps from left to right, progressively revealing the four lines. This curtain effect provides a dynamic introduction to the data.",
"data": "movielegs.tsv (tab-separated values)",
"encoding": "x: date (Week 1-Week 23), y: numeric (weekly percent of total domestic gross), color: movie (Titanic, Frozen, Avatar, Force Awakens), line: movie",
"visualization_type": "Animated multi-series line chart",
"animation": "A white rectangular curtain covers the chart initially, then its width shrinks to 0 over 8 seconds with a cubic easing, revealing the lines from left to right.",
"interaction": "none",
"perception": "The animation facilitates comparison across films by progressively revealing the line chart, directing attention to the shape and relative position of the lines over the 23 weeks.",
"highlighting": "Different line colors distinguish four movies: Titanic (orange), Frozen (steel blue), Avatar (Indian red), and Star Wars: The Force Awakens (lime green).",
"data_quantity": "23 discrete time points per line, 4 lines (total 92 data points)",
"data_variables": "date: categorical/ordinal (week 1-23), titanic, frozen, avatar, forceawakens: quantitative (weekly percent of total domestic gross)",
"visual_channels": {
"x": "Week of theatrical release (ordinal scale)",
"y": "Weekly percent of total domestic gross (%) (linear scale)",
"color": "Categorical - movie title"
},
"marks": "Lines",
"design": "A curtain wipe animation reveals the line chart from left to right. All four movie lines start at the left edge and are revealed simultaneously over eight seconds after a 0.8 second delay, drawing attention to the shape of each film's box office trajectory.",
"data_encoding": "x: Week (categorical, equally spaced), y: percent of domestic gross (continuous), color: movie (categorical), line: movie",
"interaction": "No interaction; playback is a reveal animation via a white rectangle covering and then uncovering the chart."
}
---
> **Tip**: Include the title, author, and full link.
> Directly paste the relevant code block from the gist into your description. Use a single paragraph and 3-4 sentences for a concise example. Do not use a markdown list.
If you cannot find the information, mention it as not being in the known metadata.
For the query above, provide a description. Note that files can contain other things besides the viz code itself. For example, the README might contain a link to the block or to a fork of it. The code might use d3 or dimple. Treat those as metadata too. If a provided title already makes sense, you can use it as-is for the title. Otherwise improve it. For your response, do not wrap the description in any html or markdown. Start and end with the description text only.
---
The final answer text should be short and concise, but contain enough detail for someone to understand what the graphic is about. Use complete sentences, no markdown, and do not include html. Do not use semicolons or colons in the first sentence of the description. Start with a phrase like "This visualization" or "This chart" and then complete the description. Keep the total to less than 150 words.
Your response must follow the format:
Title: <title>
Description: <description>Title: Animated movie legs
Description: This visualization compares the box-office performances of four high-grossing films by charting their weekly share of total domestic gross over 23 weeks of theatrical release. Lines for Titanic, Frozen, Avatar, and The Force Awakens are drawn in different colors across an x-axis of release weeks and a y-axis of percent of total domestic gross. A white curtain initially covers the chart and sweeps away over time, progressively revealing each line, which effectively animates the data and highlights the films' differing box-office trajectories.