Skip to content

Instantly share code, notes, and snippets.

@shaunlebron
Last active December 12, 2018 17:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shaunlebron/2fef51a3c72049761c5290f92ed0c6b7 to your computer and use it in GitHub Desktop.
Save shaunlebron/2fef51a3c72049761c5290f92ed0c6b7 to your computer and use it in GitHub Desktop.
BTrDB Plotter axis

Plotter design details (Dec 2018)

  • BTrDB stores data aggregated at several resolutions.
  • Like a file browser is used to explore a file system, the plotter makes visible all the data that BTrDB can publish. It is designed to make exploration as fluid as possible.

Time Axis

The time axis is peculiar but perhaps most useful for deep-diving through time as fluidly and clearly as possible.

Calendar rows: The axis has two rows: higher resolution on top, lower resolution on bottom. It's a bit like a calendar that can display days inside a month—but with the flexibility to switch to hours inside a day, seconds inside an hour, whatever unit labels fit at the user's current zoom level:

Regions, not points: A day or a month are not points in time, rather they represent ranges of time. Since we use a calendar-like axis, we do not display ticks for each label. Rather, for clarity without distraction, we only explicitly show boundaries when mousing over labels.

Screenshots at each level:

00

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

Discoverability

At a high-level, these are the design primitives used to promote discoverability:

  1. Mouse-overs - show axis label boundaries
  2. Cursor cues - axis label clickability (for selecting)
  3. Double-clicking - used to zoom into anything
  4. Clicking out or pressing escape - remove a highlight or selection
  5. Explicit when needed - not obvious, so we say "Hold shift to inspect"
  6. Toggling - Choose human/raw units, or local/standard time directly on the plot

We look at each in detail in next sections.

Mousing over the Axis

To know exact boundaries for each label, mouse over them:

mouseover

Clicking the Axis

You can click each of the labels to select them:

click

Selections

When a selection is made, details about all the points within that selection are displayed as annotations, as you can see above.

Highlights

Hold shift to inspect points. Change units to see raw data.

highlight

Cursor-snapping

When highlighting or making selections, the cursor snaps to the units of the hovered surface:

  • BTrDB units
  • Axis units

Manual selections

Drag when holding shift to make a manual selection:

selection

If making the selection on axis, cursor will snap to the axis units:

selectionsnap

Zooming

Double-clicking works in most contexts to zoom.

Double-click an axis label:

dblclick-axis

Double-click a selection directly:

dblclick-selection

Double-click a highlight:

dblclick-highlight

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment