A Technical Breakdown of The Pudding’s “Making It Big”

This data-driven article from The Pudding visualizes the extremely slim chances for music bands to achieve major success. Using a compelling scrollytelling format, the piece guides the reader through data on thousands of bands, highlighting the rare few who graduate from playing small local venues to headlining major arenas, and the vast majority who do not.

What this piece is about

“The Unlikely Odds of Making It Big” analyzes three years and 75,000 shows in New York City to quantify a musician’s chance of success. The narrative uses the band Sylvan Esso as a case study, following their journey from a 250-person capacity venue to a 3,000-person headlining show.

The story methodically filters a dataset of over 7,000 bands, showing how few manage to play a second show, graduate to a medium-sized venue, or ultimately reach the “big time.” It concludes by visualizing the career paths of the handful of successful bands and presenting the overwhelming number of “everybody else” in a searchable wall of names, driving home the core message about the rarity of success.

Core ideas & key takeaways

• Success is an extreme outlier: The central finding is that “making it big” is incredibly rare. The article shows that out of an initial pool of over 7,000 bands, only 21 reached the level of success defined as headlining a venue with a capacity over 3,000.
• The funnel of attrition is steep: The story effectively visualizes a funnel where most bands drop off at each stage. Many play only one small show and are never heard from again. A smaller fraction graduate to medium venues, and a minuscule percentage reach large ones.
• The path to success varies: For the few bands that do succeed, the time and trajectory differ significantly. The article contrasts the rapid ascent of Sylvan Esso with the longer, more typical journey of other bands.
• Scale is a powerful narrative tool: By visualizing all 7,000 bands, first as a sea of dots and finally as a wall of names, the piece makes the scale of the music scene and the odds of success feel tangible and personal.

How the scrollytelling works

The article is built around a classic “scrollytelling” structure, using the user’s scroll position to trigger animations and narrative beats.

• Scroll triggers and transitions: The primary interaction is scrolling. As the user scrolls, text paragraphs fade in and trigger corresponding changes in a persistent visual element. For example, scrolling down populates the main visualization with thousands of data points and then uses color highlights to filter them based on the narrative.
• Stepper/sticky patterns: The core of the experience is a “stepper” or “sticky” layout. The main circular visualization remains fixed (or “pinned”) on the right side of the screen, while the narrative text scrolls on the left. Each block of text acts as a “step” that updates the state of the pinned visual, guiding the reader’s focus without requiring them to leave the main chart.

• Narrative pacing and sectioning: The story is broken into three clear acts, demarcated by large headings: “Making it big,” “How long it takes to make it,” and “Everybody else.” This structure first establishes the overall landscape, then zooms in on the successful few, and finally zooms back out to show the entire dataset, creating a powerful narrative arc.

Visualization methods and design

The article employs several effective data visualization techniques to tell its story.

• Chart types and encodings:
  1. Radial Scatterplot: The initial visualization is a large, circular plot where each dot represents a band. It uses position (distance from the center) and color to encode venue size tiers (Small, Medium, Big). As the user scrolls, colors change to highlight subsets of the data—for instance, turning bands that played a medium venue yellow and the few that made it to a big venue pink.
  2. Timeline Dot Plot: In the “How long it takes to make it” section, the visualization changes to a series of timelines. Each row represents a successful band, with the x-axis encoding time. Dots on the line represent individual shows, with their size encoding venue capacity and color distinguishing between opening and headlining gigs.
  3. Data Wall: The final section, “Everybody else,” presents a massive grid of band names. This isn’t a chart in the traditional sense but a qualitative visualization that uses sheer volume to communicate the scale of the dataset.

• Annotation strategies: The primary annotation method is the scrollytelling text itself. Key phrases and numbers in the narrative are highlighted, directly corresponding to the visual changes in the pinned chart. This tight coupling between text and visuals ensures the reader understands what each animation signifies. For example, when the text states “only 21 out of the 7,000 bands reached Sylvan Esso’s level,” 21 dots are highlighted in the chart.
• Interaction affordances and affordance clarity: The main affordance is the browser’s scrollbar, an intuitive and universally understood mechanism. In the final section, an explicit search bar is introduced, providing a clear affordance for users to explore the full list of bands and find familiar names.

Implementation notes

While the provided analysis could not definitively identify the specific libraries used, the implementation likely relies on common, robust web technologies.

• Libraries and techniques:
  • It is highly probable that D3.js was used for data binding and managing the complex transitions and layouts of the visualizations.
  • To render thousands of animated dots performantly, the authors likely used HTML5 Canvas or WebGL rather than SVG, which can become slow with a large number of DOM elements.
  • The scroll-triggering logic that powers the stepper format is typically implemented using the modern Intersection Observer API, which is highly efficient for detecting when elements enter the viewport.
• Data binding and state management: The stepper pattern requires a clear state management system. As the user scrolls to a new text block, a state change is triggered, which updates the visualization’s properties (e.g., which dots to highlight, their color, and their position). This creates a seamless, movie-like experience driven by the reader’s pace.

Performance and accessibility

• Performance considerations: The primary performance challenge is rendering thousands of data points without causing lag. Using Canvas is a key optimization. The animations themselves appear staggered and smooth, suggesting careful attention to animation budgets and rendering performance.
• Accessibility considerations: For a highly visual and animated piece, accessibility is crucial. Standard best practices would include:
  • Honoring the prefers-reduced-motion media query to disable or reduce animations for users with vestibular disorders.
  • Ensuring the final search input is keyboard-navigable and has an appropriate ARIA label.
  • Providing a fallback or simplified text summary for screen reader users who cannot perceive the visual narrative.

Conclusion

The Pudding’s “Making It Big” is an exemplary piece of data journalism and scrollytelling. It translates a dry statistical reality—the low probability of success—into a compelling and visually engaging narrative. By pairing a classic stepper pattern with thoughtfully designed visualizations, the article allows the data to unfold progressively, making a complex story intuitive and impactful for a wide audience.

Read more here