RxJs async requests pick random user

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.21.0/ramda.js"></script>
<h1>
 Players Ready for a session of iDart!!
</h1>
<section class="players">
</section>
<button class="load-more">
load more
</button>

CSS

.players div{
  margin: 10px;
  padding: 10px;
  width: 200px;
  background-color: #ccc; 
}
.players a {
  display: inline-block;
  padding: 12px 5px;
}
.players img {
  width: 50px;
  display: inline-block;
  vertical-align: middle;
}

Babel + JSX

let btnLoadMore = document.querySelector('.load-more');

const toUrl = R.always('https://api.github.com/users')
const ajaxP = R.unary(fetch)
const jsonP = R.invoker(0, 'json')
const users = R.composeP(jsonP, ajaxP)
let randomPlayer$ = Rx.Observable
  .fromEvent(btnLoadMore, 'click')
  .map(toUrl)
  .startWith(toUrl())
  .flatMap(users)
  .map(pickRandomItem)

randomPlayer$.subscribe(appendPlayerToDOM)

function pickRandomItem(arr){
  var randomIndex = Math.floor(Math.random() * arr.length)
	return arr[randomIndex]
}

function toTemplate(user){
	var a = document.createElement("a")
  a.textContent = user.login
  a.href = user.html_url
  var img = document.createElement("img")
  img.src = user.avatar_url
  var div = document.createElement("div")
  div.appendChild(img)
  div.appendChild(a)
  return div;
}

function appendPlayerToDOM(u){
  var t = toTemplate(u)
  var users = document.querySelector('.players')
  users.appendChild(t)
}