A radial range slider to select dates in circular, recurring data sets. It can be used for repetitive event data, such as the time of day, weeks, or seasons, but also for other circular data, such as direction angles, etc.
Update 11 Feb 2016: Find the source at https://github.com/tillnagel/radialrangeslider
To adapt the range, the user can drag either the start or the end handle. This works continously in both directions, as well as for movements over 360°.
Unique to this design is the ability to easily select any range, including ranges overlapping start and end dates, and the ability to move chosen ranges around as a whole. The adjustment handles can be set to snap to allowed values, only. Multiple ranges in the same view are possible. Furthermore, the interaction possibility of the range selector can be combined with the visualization of the data in a unified widget.
There have been various design proposals or implementation around the idea of selecting ranges from a arbritary data set, as well as radial visualizations for time data. In the following, some of those ideas are presented and discussed.
Range sliders [allow] users to adjust values from both ends (instead of only one end), and to move the entire range of interest by dragging the middle of the slider.
The well-known Home Finder provided different GUI widgets to dynamically query a real estate database. It included one of the earliest examples of a range slider, e.g. to select the number of bed rooms, or to define a price range. Those were without the ability of dragging the whole range (c.f. Williamson, C., Shneiderman, B.: The dynamic HomeFinder: evaluating dynamic queries in a real-estate information exploration system. In Proceedings of SIGIR ’92)
The Pie of Time
Stamen Design created this interaction widget for the Oakland Crime Spotting project, allowing users to filter the displayed crimes for specific times of day. It is provided in combination with a more standard linear range selector for dates. Find some more details on the Pie of Time in Stamen’s blog.
Overall, it’s a great design, and provides a smooth user interaction. Additionally, it offers the ability to select multiple time ranges. The used metaphor (of a time switch) might make it meaningful only for time of day ranges. Also, in providing no dragging interaction, there is no possibility to move the full range around.