Blutruth Zone Map Tutorial
Live demo can be found here!
The Initial Screen
The visualisation displays Cambridge traffic data from a network of Bluetooth sensors deployed all around the city.
The Bluetooth sensor network consists of 38 sensors that collect data on average traffic speed throughout Cambridge.
This visualisation shows the data in real-time and displays how the current traffic speed deviates from the historical average in each of the 38 locations.
The Vocabulary
In order to better understand the visualisation, it is important to understand what we refer to when describing specific terms.
Colour Scheme
In general, the colours in the visualisation represent the traffic speed deviation from what is considered to be the "normal". Hence, to illustrate such deviations, the sensor-allocated areas and Roads (referred to as "Links" below) between sensors are coloured using a Red-Yellow-Green gradient.
Throughout the visualisation, the red colour means that the traffic speed is slower than what is usually recorded, whereas green means that the traffic is faster. Yellow represents little to no deviation from the normal.
Links
Links are a simplified representation of the Cambridge road network. Every Link represents a Road between two Bluetooth sensors.
Links are directional and are used throughout the visualisation to provide high granularity readings on the current state of traffic between any two sensors.
Links colours represent the current traffic speed deviation, hence following the Colour Scheme, red Links have a slower than usual traffic speed, whereas green ones are faster.
Cells
We refer to Cells as coloured polygons you see on the screen, every Cell (or a polygon) represents the area that is covered by each of the 38 sensors.
Just as with the Links, the Cell's colour represents the traffic intensity in the Cells surrounding area. The Cell's colour is calculated as the average of all the traffic crossing the Cell's boundary.
Zones
We refer to Zones as a group of Cells. There are five Zones in total - North, South, East, West, and Centre.
Zone speeds are calculated by averaging Cell traffic speeds in a particular Zone. Zones speed comparison can be seen in the bar chart on the right side of the screen.
Users are able to interact with the graph and select the Zone they wish to inspect in more detail (refer to Interaction).
User Interaction
The subsection below provides an overview of how the users can interact with the visualisation.
Clicking on a Zone
Hovering over a Cell
By hovering the mouse cursor over a Cell, the user is shown all in and outgoing Links from the Cell.
The traffic flow direction for every Link is shown by animating the line arc representing a single Link.
Upon hovering over a Cell, Cell's name appears that is derived from the real-world sensor location in Cambridge.
Clicking on a Cell
By clicking on a Cell, users can inspect more specific information on the area in question.
More information is immediately displayed, such as the line graph on the bottom left corner showing the historical data for all Links coming in and out of the Cell, as well as the ability to select the date for which the information is displayed.
Interacting with the Line Graph
User can inspect the Link of their choice by hovering over the Link's id on the line graph legend. Upon doing so, the Link will be highlighted on the line graph and drawn on the map.
The Link's colour changes according to what it has been assigned to on the line graph and no longer represents the speed deviation.
Instead, users are able to see the entire day's worth of traffic speed for a specific link, as shown in the line graph.
Link's colour is also used to guide the user to inspect the current traffic speed on the table above the line graph.
An example is shown in the image below.
Historical Data
The visualisation allows for ample historical readings on the city traffic data.
Based on what is selected, the users can inspect past traffic data for a single or a range of dates.
Clicking on the Line Graph Legend
By clicking on a Link's legend entry on the graph, the user is shown historical traffic reading from 7 days ago.
This provides a historical context, allowing to estimate what the traffic might be in the upcoming hours.
Selecting a Single Date (navigation bar)
Dates can also be specified. Primarily this can be achieved by clicking the date selection button on top of the page.
This allows moving through historical date going one day, or seven days at a time.
Selecting a Single Date (calendar tool)
Dates can also be selected using the calendar tool on the bottom left of the page, right above the line graph.
Upon clicking the date selection tool, users are able to either enter a single date, or a date range.
Double-clicking on a single date selects it.
Selecting a Date Range
To select a date range, the user first has to click on a start date, and then click on the end date. The user is expected to click on a start and end date only once.
Double-clicking on a Cell
Users have the option to double-click on two Cells of their choice to show the fastest route between them.
This can be done by double-clicking on one Cell, and then double-clicking on another. This type of selection is differentiated from the normal (single-click) Cell selection by the dashed line surrounding the Cell's perimeter.
Finding the Fastest Route
The fastest route feature calculates the lowest travel time between the selected cell, and hence is not a result of the shortest distance, but rather time. As a result, the sequence in which the Cells are selected matters, as the fastest route takes into account the direction in which the user intends to travel to.
Information Bar
The Information bar permits users to select what the visualisation displays.
Speed Deviation, Current Speed, and historical Speed
By default, the visualisation displays the speed deviation from average in the area surrounding the sensor. Users can alternatively select to see the current and historical speeds in all cells.
Display all Links
Alternatively, users can select to hide all Cells and just display the Links instead with their colour representing the speed deviation from the regular.
Modifying the URL
Upon clicking on a Cell, the website URL changes to represent the selection. Each of the 38 sensors has a unique id that is shown in the URL bar.