User Guide
WebGLayer allows to develop interactive heatmap visualizations of large datasets by implementing multiple linked views to present data. Each of the views enables different interactions (such as filtering or relationship analysis) that trigger an instant update of the other views. Users thus benefit from immediate and dynamic data visualizations, gain better understanding of data by applying filters, and develop the opportunity to discover relationships and patterns in the data.
A heatmap is a visualization used to depict the density of data at a certain location. We use a color scheme based on a red-green color gradient to visualize the density. A low density (transparent green color) represents a location with a lower amount of records; a high density (red color) indicates a ‘hotspot’, or a high concentration of records.
Heat map: Showing the traffic accidents in Birmingham. Low density of car accidents in the area= green, high density= red. The purple icons show schools in the neighbourhood. Blue dots show the locations of single traffic accidents.
Data filtering options (right panel): The traffic accidents between 8 and 10 AM are selected, with an accident severity of “fatal” and “serious”. Further querying can be done through “day of the week”, “speed limit” and “date”.
Parallel coordinates (corner left panel): Showing relationships among the variables in the dataset. It is clear that the selected accidents occurring between 8 and 10 AM happened on different weekdays, and mostly on single carriageways, dual carriageways, one-way streets and roundabouts with a speed limit of 40 and 30 miles per hour.
The WebGLayer supports the following user interactions:
The filter allows users to define a range filter directly in the histogram (i.e. column charts in the right panel). Multiple ranges can be selected. The selection can be shifted and resized just by dragging. The selection is cancelled by clicking out of the selected range(s) in the histogram. Three categories of data are distinguished in the histogram:
- selected (orange) - selected data in the current map view
- unselected (purple) – remaining (unselected) data inside the current map view
- out (light blue) - data out of the current map view
Users can make selections directly in the histogram and the data on the map is filtered accordingly. Such a filtering allows to compare the actual selection with the rest of the data.
This filter might be used e.g. to filter traffic accidents of a certain severity (fatal, light), to visualise accidents that happened at certain hours of the day or on certain days of the week, or to select accidents that only happened on highways or streets with a certain speed limit.
Users can also ‘zoom’ to the selected / unselected / out data to consult the exact values (number of items) on the vertical axis. By clicking on the orange / purple / light blue square, the column chart is automatically ‘zoomed’ to the selected category of data.
In this example, the chart is zoomed to the highest orange column. The scale is adjusted as well and users can thus analyse how the number of the selected records evolves during the day.
Polygon filter enables users to specify an area for data analysis by sketching a polygon directly in the map. Multiple polygons can be drawn in a single map. Once a polygon is created, the histograms (in the right panel) can be consulted to gain insights on the amount and distribution of records in the selected area (e.g. hour of the day, day of the week etc.)
Parallel coordinates is an interactive tool to show relationships and patterns among the variables in the dataset. Filters can be applied (and modified by dragging) at multiple variables simultaneously. The selected data range is displayed by an orange frame on the scale. The selection can be cancelled by clicking on the axis out of the orange selection. The density of the relationships is depicted from transparent green (low density) to red (high density).
Heatmap radius allows to modify the granularity (i.e. kernel size) of the heatmap by changing the radius of data points.
Hotspot Selection (Density colour picker): Users can locate a hotspot by selecting a (high) density range in the ‘Heatmap controls’ colour scale (i.e. typically by selecting the orange/red part of the scale). Records located inside this density range are then displayed as selected in the map. The density colour filter is similar to the tools used in graphics software (e.g. Adobe Photoshop) to select an area by a colour range (colour picker).
The blue part of the scale (to the left) serves as a density scale for the remaining (unselected) records, which are displayed in the shades of blue in the map.
Auto-adjust colour scale feature enables an automatic adjustment of the heatmap colour scale to the data currently displayed in the map view. While shifting the map, the heatmap colour scale is automatically re-adjusted according to the density of the currently visible records. When the auto-adjustment is disabled, users can adjust the colour scale manually.