Lollipop

Last updated 2 years ago

Was this helpful?

Lollipop

A Temporal Lollipop is a way of representing events that consist of some numerical values that occurs over time.

Visually, the lollipop chart consists of a line (or a thin bar) with a circle on top of it. The position of the bar will represent the timestamp of the event and the height of the bar will represent its value.

So, Temporal Lollipop charts are two-dimensional with two axes: one axis for the timestamp of the event, and the other axis for its numerical value. Those numerical values are indicated by the position of the circle on top of the line.

It is particularly useful to show events that occur close in time, but whose duration can generate overlapping drawings if, for example, a timeline were used. Thus allowing us to visualize events very close together, without losing the information about their duration.

This functionality is provided by the live-exploratory-viz plugin. It is available on the .

Functional description

The result of the query pipes must have at least one numerical value related to a timestamp:
=> random() as value every 5 sec

As a temporal version of the lollipop chart, the x-axis always refers to a time period (timestamp):

We can modify the group colors by inserting the __color variable in the query pipes, like:
=> random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5 ? '#C0392B', '#607D8B' as __color => value, __color by category

We can use other symbols besides circles, which can display category information more intuitively. So, we can modify the group markers in the query pipes, inserting the variables __markerSymbol to change the symbol type and __markerRadius to change the symbol size, like:
=> random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5?'#C0392B', '#607D8B' as __color => @set value < 0.5? 'square', 'diamond' as __markerSymbol => @set 6 as __markerRadius => value, __color, __markerSymbol, __markerRadius by category

Possible values of __markerSymbol are 'circle', 'square','diamond', 'triangle' and 'triangle-down'.
For correct group creation, these variables must always be grouped in the query pipes by the by clause, like:
=> value, __markerSymbol,__markerRadius, __color by category
The categories serve as captions and can be located on bottom, right or hidden.

PreviousJSX Widgets NextHistogram

Last updated 2 years ago

Was this helpful?

A Temporal Lollipop is a way of representing events that consist of some numerical values that occurs over time.

This functionality is provided by the live-exploratory-viz plugin. It is available on the .

Functional description

The result of the query pipes must have at least one numerical value related to a timestamp:
=> random() as value every 5 sec

As a temporal version of the lollipop chart, the x-axis always refers to a time period (timestamp):

We can modify the group colors by inserting the __color variable in the query pipes, like:
=> random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5 ? '#C0392B', '#607D8B' as __color => value, __color by category

We can use other symbols besides circles, which can display category information more intuitively. So, we can modify the group markers in the query pipes, inserting the variables __markerSymbol to change the symbol type and __markerRadius to change the symbol size, like:
=> random() as value every 5 sec => @set value > 0.5 as category => @set value < 0.5?'#C0392B', '#607D8B' as __color => @set value < 0.5? 'square', 'diamond' as __markerSymbol => @set 6 as __markerRadius => value, __color, __markerSymbol, __markerRadius by category

Possible values of __markerSymbol are 'circle', 'square','diamond', 'triangle' and 'triangle-down'.
For correct group creation, these variables must always be grouped in the query pipes by the by clause, like:
=> value, __markerSymbol,__markerRadius, __color by category
The categories serve as captions and can be located on bottom, right or hidden.