The 30-second version
Three of us built a browser-based data story about cinema and streaming. I later returned to the public site for a second design pass: the same five D3 views now sit inside a responsive editorial layout, with clearer source notes and more careful language around correlation and causation.
The question
“Streaming versus cinema” is easy to reduce to a single global trend. Our data was messier. Adoption, box-office performance, economic context, and genre preference changed at different rates in different places. We wanted to let a reader start with the global pattern, then inspect where that story stopped being uniform.
Team and my role
This was a three-person course project. In the original build, I contributed to the D3 implementation and to comparison-oriented interactions across the story. In August 2026, I revisited the presentation layer, responsive behavior, and explanatory copy while preserving the five data views and the full team credit. The underlying project remains a shared artifact; I do not attribute every chart or data decision to myself.
What we shipped
- Five interactive views: a country overview, revenue growth, price comparison, genre mix, and 2025 Oscar nominations.
- A shared year-range control linking the map, growth, and price views.
- A choropleth whose exploratory score combines Netflix subscribers, box-office activity, population, and GDP, now labelled explicitly as a comparison rather than market share.
- Per-view captions, grouped source notes, responsive chart containers, and interaction details for sliders, legends, labels, and hover states.
Decisions that mattered
Keep the D3, rebuild the frame
The second pass did not replace the data bindings or redraw the project as a static mockup. I kept the original D3 coordinate systems and interactions, then rebuilt the surrounding hierarchy: a quieter editorial palette, figure cards, chapter labels, captions, and a consistent reading order.
Treat mobile as a different reading mode
The first version depended on fixed-height slides and wheel navigation. On a phone, wide charts overflowed and fixed controls competed for the same space. The revision uses natural vertical scrolling, a single-column narrative, responsive SVG framing, and contained horizontal scrolling only where a dense chart still needs room.
Separate observation from explanation
Several original captions moved too quickly from a visible pattern to an explanation of audience behavior. The revised copy describes the trajectories first, states that the views do not establish causation, and identifies the map score as exploratory. I also corrected the map legend so its direction agrees with the score formula.
A trace of the process
This hand-drawn bar-chart sketch is one of the early artifacts preserved in the repository. It is rough, but more useful here than a polished mock dashboard: it shows the team working out comparison structure before implementation.
Evidence
The live visualization, source repository, and original project walkthrough are public. Together they show both layers of the work: the original team project and the later presentation pass.
What remains imperfect
The refreshed layout fixes the most visible mobile overflow and places provenance next to the figures, but the work is not finished. Several SVG interactions still rely on hover or pointer input, the composite score has not been sensitivity-tested under alternative weightings, and the five datasets do not share identical date coverage. Those are analytical and accessibility limits, not details to hide behind a cleaner interface.