How to dataflow merge on Observable
Tags: observable, programming, webdev, reactive
Published: 2021-11-05 19:45:56

---
title: How to dataflow merge on Observable
published: true
date: 2021-11-05 19:34:44 UTC
tags: observable,programming,webdev,reactive
canonical_url: https://observablehq.com/@tomlarkworthy/merge-dataflow
---

# How to dataflow merge on [Observable](https://observablehq.com)

_In this series I will explore programming techniques for the notebook platform [Observable](https://observablehq.com). Today I am looking at how to_ merge _multiple reactive Dataflow streams into a single stream. This article assumes you are familiar with [Observable's non-linear reactive program flow](https://observablehq.com/@observablehq/reactive-dataflow) already._

A common situation is this: you have a notebook that performs some useful task, and you want to offer a few different ways to start that task. For example, starting something based on configuration obtained from either URL parameters, local storage or a manual UI. It's a little trickier than you would hope because, if each of these methods are in their own cell [1], then we have multiple distinct data flow pathways converging into a single flow.

<small>[1] <em>and they probably should be because of separation-of-concerns</em></small>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvwjcvs9ydp8fvl7ajhm.png)

The core difficulty is if there is no data in a source, its dataflow won't tick, so if the business logic depends on all the input sources, the business logic will not tick either. So this pattern described here will joins the business logic to the sources a different way so that if any of them tick, the business logic will tick too.

In [ReactiveX](http://reactivex.io/) terms [Observable](https://observablehq.com)'s dataflow is a _[combineLatest](https://rxjs.dev/api/index/function/combineLatest)_ across cell streams, but we want a _[merge](https://rxjs.dev/api/index/function/merge)_.

| ![](https://static.observableusercontent.com/files/179fb6fdbc37ab4d1f8dbb73afd702956a35939d7d9965e21cb5285d993b117b746684e7c64c3be1ea8d8fcd6afa9ae96b13c810047ffdf3e09b69aa9d7f952e) | ![](https://static.observableusercontent.com/files/7ed8bcec1d34eda7fcd491dd5cfb4a2fc1e121cdf0ad865bf1a54b116270c0d0ae66003bbe20ef12cb622f2fba1029ef43e97f68ff7df054af615f81b3fbb388) |
| --- | --- |
| |

So here is how you can do it with _views_ and _Inputs.bind_.

## Step 1. Create an unresolved view for the business logic to depend on

We can quickly create an unresolved view with [`Inputs.input()`](https://github.com/observablehq/inputs/blob/main/README.md#inputsinputvalue). We will fan-in sources to this view.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xejmwjvh9vpzbz20ng5.png)

If the business logic extracts parameters from the _config_ variable, then it will not run until it is set to a non-_undefined_ value (note grey bar on the left of the cell after notebook startup).

Our example business logic will flash the notebook in a color set by the config.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04mgfu8o5mknrz45npoz.png)

## 2. Setup all the sources to be views

Next we need the sources to be emitting their config to a view's value.

Often, a source is already a view:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vokre0qezmjgf1e9xp6f.png)

But even if it isn't, it is trivial to create a view from a dataflow variable by writing into an [`Inputs.input()`](https://github.com/observablehq/inputs/blob/main/README.md#inputsinputvalue)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drcainrgm41z2x7n8otl.png)

## 3. Bind the source views to the fan-in view backwards

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4f31x5vlzhxbf49fzyv.png)

Now, if either of the sources fire, the business logic is run. Give it a try on the live notebook on at [@tomlarkworthy/merge-dataflow](https://observablehq.com/@tomlarkworthy/merge-dataflow)

I hope you find that useful and that you find other useful ways to manipulate dataflow!