Live links to try:
- BTrDB Viz: http://btrdb-viz-2018-01-08.surge.sh/
- Plotter: http://pingthings-2018-01-06.surge.sh/
Last active
February 25, 2021 22:35
-
-
Save shaunlebron/bb011695f5511b86ce674064dbcb9f45 to your computer and use it in GitHub Desktop.
PingThings and Mr. Plotter
We explored different ways of polishing some parts of Mr. Plotter in our own implementation.
| Mr. Plotter | Son of Plotter |
|---|---|
 |
 |
| click button to auto-fit | auto-fit periodically or double-click |
| Mr. Plotter | Son of Plotter |
|---|---|
 |
 |
| off by default, shows absolute density | always on, relative density, tucks away |
| Mr. Plotter | Son of Plotter |
|---|---|
 |
 |
| switches to points when raw | transitions to points, keeps lines |
| Mr. Plotter | Son of Plotter |
|---|---|
 |
 |
| snaps to milliseconds | snaps to microseconds |
| Mr. Plotter | Son of Plotter |
|---|---|
 |
 |
| date on each side | single context date shared by all ticks |
- Connect to backend
- UI for Stream selection
- Get in front of users
The UI cannot hold all data for a stream at once—there's too much. So it should think of the data it needs in terms of "windows".
For example, the current window of data needed to draw a given plot view is represented in the center below. It is also useful to have left and right windows of data on hand, since the user should immediately see some data when panning or zooming out.
|--------------------|--------------------|--------------------|
| | | |
| LEFT WINDOW | CURRENT WINDOW | RIGHT WINDOW |
| | (what we see) | |
| | | |
| | | |
|--------------------|--------------------|--------------------|
Mr. Plotter seems to be do this.
We can reduce network load by keeping some windows in memory.
The caching method should be tuned to the behavior of our users, but our basic choices are to discard windows that are furthest in time or space from the current view:
- time - discard least recently used windows
- space - discard windows furthest from current view
Some ideas below to get a feel for possibilities:
For example, if the user pans the plot to the right, we can keep some of the previous windows, but they should be discarded after reaching some distance from the current view.
|---------|---------|---------|---------|---------|---------|---------|
| X | | | | LEFT | CURRENT | RIGHT |
|---------|---------|---------|---------|---------|---------|---------|
^
| discard window when too far from current view
If we really want to keep caching simple, we can add to the previous method by discarding the entire cache when zooming.
|---------|---------|---------|---------|---------|---------|---------|
| X | X | X | X | X | X | X |
|---------|---------|---------|---------|---------|---------|---------|
^
| discard all previous windows when zooming
|--------------------|--------------------|--------------------|
| | | |
| LEFT | CURRENT | RIGHT |
| | | |
| | | |
| | | |
|--------------------|--------------------|--------------------|
If we want to keep windows across resolutions, we can discard windows based on some kind of distance function, using panning distance as one dimension and resolution distance (tree levels) as another.
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| X | X | X | X | | | | | | | | | | | X | X | X | X |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|---------|---------|---------|---------|---------|---------|---------|
| X | | | | | | X |
|---------|---------|---------|---------|---------|---------|---------|
discard windows across resolutions
when too far from current window
|--------------------|--------------------|--------------------|
| | | |
| LEFT | CURRENT | RIGHT |
| | | |
| | | |
| | | |
|--------------------|--------------------|--------------------|
The "center" from which we measure the distance should probably be the last zooming point rather than just using the middle of the screen, which will allow the user to scroll to quickly return to their previous zoom.
We can number our windows by time of access, and periodically discard those that are a certain distance from our current time, when a certain capacity is reached.
(windows numbered by time of access)
|---|---|---|---| |---|---|---|---|---| |---|---|---|---|
| 1 | 2 | 3 | 4 | | 8 | 9 | 10| 11| 12| | 17| 18| 18| 18|
|---|---|---|---| |---|---|---|---|---| |---|---|---|---|
X X X X X X
|---------|---------|---------|---------|---------|---------|---------|
| 5 | 6 | 7 | 13 | 15 | 16 | 16 |
|---------|---------|---------|---------|---------|---------|---------|
X X X
discard windows based on distance
from current time (say t=18)
|--------------------|--------------------|--------------------|
| | | |
| 14 | 14 | 14 |
| | | |
| | | |
| | | |
|--------------------|--------------------|--------------------|
We will have to determine when to fetch our windows. Some ideas:
- When zooming, debounce a call to update the resolution.
- When panning outside the current window, immediately retrieve the next window
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment