Tool: Figma Purpose: Create a high-fidelity static representation of the final visualization, including layouts and interactions.

Layout:

  • Top Section: A large map of the city showing bus routes and color-coded delays.
  • Bottom-Left: A bar chart showing average delay by route.
  • Bottom-Right: A time-series chart showing daily average delays.
  • Side Panel: Contains filter controls for day of the week, time of day, and weather.

Interactions to be Implemented:

  • Hover: Hovering over a route on the map or a bar in the bar chart shows a tooltip with a detailed description (e.g., “Route 42: 12-minute average delay”).
  • Click/Select: Clicking a route in the bar chart highlights that route on the map and filters the time-series chart to show only data for that route.
  • Filter: Using the side panel, users can select “Monday” or “Rainy Days” to filter all charts.

Conclusion: The digital sketch confirms that the three main views (map, bar chart, time series) can be effectively combined into a single dashboard. This sketch will be used as the blueprint for the build phase.