JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<script src="https://cdn.rawgit.com/caolan/highland/2.10.5/dist/highland.js"></script>
<script src="https://rawgit.com/jimhigson/oboe.js/v2.1.3/dist/oboe-browser.min.js"></script>
<div id="app"></div>

CSS

#app {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: white;
}

.cell {
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0;
}

JavaScript

var URL = 'https://rawgit.com/JuanCaicedo/better-json-through-streams/master/data/cat-points.json'

oboe(URL)
	.node('{x y color}', function (p) {
  	console.log(p)
    var cell = document.createElement('div')
    cell.classList.add('cell')
    cell.style.left = p.x * 10 + 'px'
    cell.style.top = p.y * 10 + 'px'
    cell.style.backgroundColor = p.color
    var grid = document.querySelector('#app')
    grid.appendChild(cell)
  })