fresh block

100%

✓ Published0🌍 Public

Last edited Jun 14, 2016

Created on Jun 14, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

GGerardoFurtado

75% match

Loading thumbnail…

fresh block

A small multiple line chart shows monthly values for a single series across twelve months, with grey circles marking each data point. Hovering over a circle highlights it in red, brings it to the front, draws a dashed vertical guide line to the baseline, and animates a large value label near the point. Built with D3 v3, the visualization uses an ordinal x-scale for month names, a linear y-scale for values, and SVG paths, circles, and text elements. The data comes from a local JSON file with name, value, and date fields, parsed via `d3.time.format`.

BBrunoDumas

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

73% match

Loading thumbnail…

fresh block

This example demonstrates an interactive bar chart where movie production costs are displayed as horizontal bars, with buttons allowing the viewer to filter by genre (Baller Movie, Drama Movie, or Comedy Movie). It shows how categorical data can be filtered dynamically through user interaction. The visualization is built with D3.js (version 3.5.5) and uses a data-driven approach where an array of movie objects is bound to the DOM. The code defines CSS classes for the bars and controls, and the `chooseFromButton` function triggers a re-render of the chart based on the selected genre. The data is embedded directly in the script, and the rendering relies on D3’s data join and selection methods to update the bar elements.

BBenHeubl

73% match

Loading thumbnail…

Broadway Interactive

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.

BBenHeubl

73% match

Loading thumbnail…

fresh block

A simple bar chart displays five blue rectangles of varying heights, encoding the array `[100, 250, 175, 200, 120]` as vertical bars. The visualization uses D3 v4 to bind data to SVG `rect` elements, setting their `x`, `y`, `width`, and `height` attributes with data-driven values. Each bar is positioned sequentially along the horizontal axis, with its height proportional to the data value and filled in solid blue with white strokes. The chart demonstrates basic data binding and attribute manipulation in SVG, without axes or scales.

BBenPiggot

73% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

72% match

Loading thumbnail…

fresh block

A monthly time-series line chart displays a dataset of twelve alphabetical categories (A–L) with associated values. The visualization uses an SVG line and red circular markers to trace value changes over time. Built with D3.js v3, it employs ordinal and linear scales, a line generator, and custom mouseover/mouseout interactions that highlight data points with blue fills, dashed vertical guide lines, and enlarged value labels. The chart reads from an external JSON file, rendering axis labels as text elements and supporting smooth transitions during hover effects.

BBrunoDumas

71% match