WHAT
The timeline slider pattern uses the slider to control the features that correspond to a certain time span. Timeline slider reduces the amount of data to display by showing only the data within that time span.
WHY
Observations or measurements are rarely single occurrences. Phenomena happen continuously and change their values over time. Knowing when something happened can be as important as knowing where it happened. Data that is being collected for the same feature but at different times is referred to as temporal data. In most cases, the location of the feature is stationary, such as a weather station, streetlight, property, or geographic boundary. At other times, the location changes also. The data is then referred to as spatial temporal or spatiotemporal, which is important for tracking and analyzing assets, movements, or shipments across geographic areas and over time.
WHEN
The time span can be fixed or cumulative. Fixed time spans typically use hours, days, months, or years and show totals within that span for comparison. As the timeline slider advances, only features that fall into the applicable time span are visible. Cumulative time spans show progression from the beginning to the current time extent. Examples for apps using fixed time spans are crime mapping by day of the week or sea level rise by year. Apps that use cumulative temporal data, for instance, include sales dashboards to show growth or health apps to show virus outbreaks.
HOW
Provide a horizontal slider component with two knobs or levers to control the selected time span. Use a single knob instead of the levers to represent a fixed unit, such as a day or year. Add labels to clearly state the start and end of the complete time extent and tick marks at periodic intervals in between. The size of the timeline slider should be relative to the time extent and the available screen size. Remember that sliders are difficult to manipulate and should be used to select time approximations. If picking exact values is important, choose other input components, such as date pickers, drop-down lists, or button bars. Consider snapping the slider to human-friendly values, such as hours or days.
Another common interaction method for the timeline slider is to define a fixed time span, such as a day, week, or year, and use that duration to “step” forward and backward in time using playback controls. That way, you are guaranteed to see all your data in order and with equal time slices.
The following three approaches can be used to see cumulative time — for instance, stores opened since the year 2000:
- Default the start date to the year 2000 and show only one adjustable knob to change the end date.
- Allow users to toggle from the one-knob cumulative display to a fixed time span that is controlled by two knobs.
- Provide a lock button to temporarily freeze either the start or the end knob.
In the map, filtered features should be hidden by default, but if their presence is important, you may choose to apply opacity instead so they are still visible in the map. Alternatively, consider adding a “firefly” effect that gives points a bright, glowing appearance. This effect works best in dark, desaturated basemap layers and is a nice way to show growth or expansion by how “the map lights up.”
EXAMPLE
Crime Time is a sample app in Esri’s COOL MAPS series. The app visualizes San Francisco crime data by neighborhood, day of the week, and hour of the day. It makes good use of the container that holds the timeline slider by also showing the title, a drop-down list to select the crime type, the legend, and a visually interesting way to select the day of the week. The timeline slider has a single green lever and tick marks with labels indicating the time of day. It is set to play by default with a small button to pause. The app uses cluster marker symbols to show the cumulative total number of crimes as indicated with a number inside the black inner circle. The light-green circle around the inner circle grows proportionately to the number of crimes. Additionally, the cluster marker adds another circle in dark green to show the total incidents within the currently selected hour.
