Skip to content

Instantly share code, notes, and snippets.

@hsjunnesson
Last active August 29, 2015 14:01
Show Gist options
  • Save hsjunnesson/0b3c20d7d9d2de45959e to your computer and use it in GitHub Desktop.
Save hsjunnesson/0b3c20d7d9d2de45959e to your computer and use it in GitHub Desktop.

Marble diagrams

A notation for diagramming signals.

A line signifies time.

──────────────────────────>

"Marbles" on the line corresponds to "next" events from the signal.

───O───────O───────O──────>

A line at the end of the line corresponds to the "completed" event.

───────────O─|

An X at the end of the line corresponds to the "error" event.

─────────────X

Signal composition

We illustrate signal composition by the following notation.

A UISlider sends its own instance whenever the user moves the slider.

     slider  slider  slider
 ───O───────O───────O───────>

We compose a new signal which derives from the original signal and maps each next event to the value of the slider at that point.

     slider  slider  slider
 ───O───────O───────O───────>
    |       |       |
  +──────────────────────+
  | map: slider -> value |
  +──────────────────────+
    | 0.3   | 0.4   | 0.88
 ───O───────O───────O───────>

The new signal, when subscribed to, will send the slider's value as floats.

We can further compose the signal - to make it round to the nearest integer, plus one.

     slider  slider  slider
 ───O───────O───────O───────>
    |       |       |
  +──────────────────────+
  | map: slider -> value |
  +──────────────────────+
    | 0.3   | 0.4   | 0.88
 ───O───────O───────O───────>
    |       |       |
  +───────────────────────+
  | map: round(value) + 1 |
  +───────────────────────+
    | 1     | 1     | 2
 ───O───────O───────O───────>

The next step is to make sure the slider only sends whenever there's a change in value.

     slider  slider  slider
 ───O───────O───────O───────>
    |       |       |
  +──────────────────────+
  | map: slider -> value |
  +──────────────────────+
    | 0.3   | 0.4   | 0.88
 ───O───────O───────O───────>
    |       |       |
  +───────────────────────+
  | map: round(value) + 1 |
  +───────────────────────+
    | 1     | 1     | 2
 ───O───────O───────O───────>
    |       |       |
  +──────────────────────+
  | distinctUntilChanged |
  +──────────────────────+
    | 1             | 2
 ───O───────────────O───────>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment