BluTruth Zone Map Tutorial

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 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.


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.


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.

Created using D3.js and Flask.