Broadway Interactive

100%

Broadway Interactive

✓ Published0🌍 Public

Last edited Jun 29, 2016

Created on Jun 14, 2016

This interactive visualization compares the cumulative box-office revenue of the Broadway musical Hamilton with the average of other Broadway shows from July 2015 to April 2016. Two line charts, rendered as SVG with animation, allow users to toggle between datasets and adjust a time-range slider using the custom d3.slider.js library. The visualization relies on D3.js for scaling, axes, and path generation, drawing data from the included CSV files to highlight Hamilton’s rapid revenue ascent against the industry baseline.

AI-generated description

This is the braodway projection interactive, currently developed at the Economist Data Team.

We love blockbuilder!

Similar vizzes

Loading thumbnail…

final_bw_projection_chart

This interactive chart compares the cumulative gross revenue of the Broadway musical *Hamilton* against the average of other shows over time. Users can adjust multiple show attributes through dropdown menus—including actor Ulmer scores, theater seats, cast size, and review ratings—to see how a hypothetical show’s projected weekly gross compares to Hamilton’s trajectory. The visualization uses D3.js to render an animated SVG line chart with a draggable slider for date selection, pulling data from CSV files. The interface is styled with Economist-branded fonts and a red accent color.

BBenHeubl

88% match

Loading thumbnail…

final_bw_projection_chart

An interactive line chart compares the projected gross revenue of the Broadway musical *Hamilton* against a user-defined hypothetical show over a 40-week period. Users adjust the hypothetical show's attributes—such as actor ratings, theater size, and critical reviews—through dropdown menus, and a slider allows scrubbing through time. The visualization uses D3.js to render SVG paths and axes, with the projection model driven by JavaScript objects that map selected parameters to values. The chart presents Hamilton's actual cumulative gross as a benchmark against the modeled performance.

BBenHeubl

85% match

Loading thumbnail…

final_bw_projection_chart

This interactive line chart tracks the cumulative growth of the "Hamilton" metric over time, comparing it against a computed average baseline from weekly data spanning July 2015 to April 2016. An animated slider enables scrubbing through the timeline, updating the visualization dynamically. The chart is rendered as an SVG using the D3.js library, with the slider implemented via the custom `d3.slider` module. Data is loaded from a CSV file, and the visualization is styled with Economist-branded fonts and CSS.

BBenHeubl

73% match

Loading thumbnail…

fresh block

This visualization, built with Vue and D3 v4, tracks Broadway show attendance and financial metrics across multiple seasons as a small multiples line chart rendered on canvas. Each line represents a show’s weekly gross revenue over time, with the x-axis showing weeks and the y-axis showing gross in dollars. The data is sourced from a gist by BenHeubl and includes a CSV with fields like average ticket price, attendance, and capacity percentage. The chart is part of a blockbuilder.org project and uses canvas rendering for performance with large datasets. Interaction: Users can hover over individual lines to highlight a show and reveal its name, while the rest dim. The visualization also filters by show type (play/musical) and revival status through a dropdown menu.

BBenHeubl

73% match

Loading thumbnail…

test_data_function_broadway

A series of 51 dots arranged along a diagonal animates when a button is clicked, shifting their positions to a new diagonal layout. The visualization also computes a theater ticket sellout probability using a long logistic regression formula, logging the raw input data to the console. Built with D3.js, the SVG output uses `d3.select`, `.transition()`, and `.duration()` for the animated movement, though the animation is the only interactive element; the prediction function is not visually mapped. The code comes from a Blockbuilder.org gist and imports D3 version 3.5.5.

BBenHeubl

71% match

Loading thumbnail…

Hamilton characters #2

This visualization maps the speaking appearances of characters from the musical *Hamilton* across its songs and lines. It shows each character's presence by arranging colored circles on a grid, where circle radius represents the number of lines in each song for that character. The circles are positioned near labels for each character and use a force-directed layout via `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to cluster appearances. Data is loaded from `characters.json` and `lines.json`, and the circle positions are updated on each simulation tick.

FFrissAnalytics

69% match

Loading thumbnail…

Broadway Shows Average Gross by Type

This visualization displays the average gross revenue for different types of Broadway shows from 1990 to 2016, using horizontal bars. The code calculates averages from a CSV dataset and renders them with the p5.js library, drawing axes and labels with custom functions. Green rectangles represent each show type’s average gross, scaled to thousands of dollars, with the x-axis showing tick marks and the y-axis listing category names. The data is loaded via `loadTable` from a remote CSV URL.

Ssyu36

68% match

Loading thumbnail…

D3 Starter Updating bar chart + Interaction

This example demonstrates an interactive bar chart that visualizes movie metrics—revenue, budget, or popularity—for titles released between 2000 and 2009. Users click buttons to switch metrics, triggering animated updates to bar lengths and axes through D3’s general update pattern with transition delays. Hovering over a bar displays a tooltip with details like profit, ratings, and genre. The code uses d3.scaleBand, d3.scaleLinear, d3.axisTop, d3.axisLeft, and d3.transition, with SVG rendering and data parsed from a CSV file.

Mmaxthamt

66% match