Clipper BayPass / Dashboard Series
From Data Dashboards to Data Stories
Walk through a refactoring example: from the original Tableau visualizations to HTML dashboards and then to Storytelling with Data. Each stage demonstrates a different step in the refactor.
Baseline / Tableau
Original Visualizations
The existing Tableau Contracts dashboard is the starting reference for the rebuild.
External reference, not a local archive. Tableau access may be required.
Visualization Platform: Tableau provides the original hosted dashboards and interactive views.
Open Tableau Reference (New Tab) →Series 1 / HTML Refactor
Tableau to HTML
Tableau-inspired reports with MTC UI styling, sidebar navigation and improved charts and tables.
Original report calculations retained for comparison, including their known limitations.
Charting Libraries: Recharts for bar, line and treemap charts; Mapbox GL JS through react-map-gl for institution maps.
Review HTML v1 →Series 2 / SWD
Storytelling with Data
Audience-specific stories lead with a question, highlight the evidence and keep the supporting detail available.
New series with reporting improvements informed by the requirements and meeting notes.
Charting Libraries: Apache ECharts for interactive bar and line charts, zoom sliders and multi-series toggles; Mapbox GL JS through react-map-gl for institution maps.
Review the SWD Series →These HTML versions demonstrate the refactor and remain for internal review only. A URL filter is not access control; external release requires authentication, organization-scoped authorization and accepted business-data validation.