JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script>
<script>
window.data =...

CSS

.block {
  height: 2px;
  width: 100px;
}

Babel + JSX

const split = (a) => {
	a = (a | (a << 12)) &3145983;
  a = (a | (a << 8))  &3207183;
  a = (a | (a << 4))  &51130563;
  a = (a | (a << 2))  &153391689;
  return a;
};

const getZValue = (r, g, b) =>
	split(r) + (split(g) << 1) + (split(b) << 2);

data.forEach(node => {
	node.z = getZValue(node.r, node.g, node.b);
});

data = _.sortBy(data, 'z');

const html = data.map(node => {
	const { r, g, b } = node;
	const color = `rgb(${[r,g,b].join(',')})`;
	return `
  	<div class="block" style="background:${color}"></div>
  `;
}).join('\n');

document.body.innerHTML = html;