flatMap, mergeMap, switchMap and concatMap in rxjs?

In the marble diagram below a source stream that emits at 5ms, 10ms, 20ms will be *Mapped to a timer(0, 3), limited to 3 emissions:

Play with this marble diagram here: "mergeMap vs exhaustMap vs switchMap vs concatMap"

Already having all these awesome answers, I wanted to add a more visual explanation

Hope it helps someone

Taking this from a previous answer:

• flatMap/mergeMap - creates an Observable immediately for any source item, all previous Observables are kept alive. Note flatMap is an alias for mergeMap and flatMap will be removed in RxJS 8.
• concatMap - waits for the previous Observable to complete before creating the next one
• switchMap - for any source item, completes the previous Observable and immediately creates the next one
• exhaustMap - source items are ignored while the previous Observable is not completed

Here is an example of how each of the operators behaves when the source is immediate items (0,1,2,3,4) and the map function creates an Observable that delays each item by 500ms:

const { mergeMap, flatMap, concatMap, switchMap, exhaustMap } = Rx.operators;

const example = operator => () =>
  Rx.Observable.from([0,1,2,3,4])
  .pipe(
    operator(x => Rx.Observable.of(x).delay(500))
  )
  .subscribe(console.log, () => {}, () => console.log(`${operator.name} completed`));

const mm = example(mergeMap);
const fm = example(flatMap);
const cm = example(concatMap);    
const sm = example(switchMap);
const em = example(exhaustMap);

.examples > div {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  padding: 7px 16px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.js"></script>

<div class='examples'>
  <div onClick='mm()'>mergeMap </div>
  <div onClick='fm()'>flatMap</div>
  <div onClick='cm()'>concatMap</div>
  <div onClick='sm()'>switchMap</div>
  <div onClick='em()'>exhaustMap</div>
</div>