JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://cdn.vis4.net/chroma.min.js"></script>
<h1>Visualization of ColorBrewer colors in different color spaces</h1>
<select id="brewer"><option selected="selected">all</option></select>
<select id="mode">
    <option selected="selected">Lab</option>
    <option>Lch</option>
    <option>RGB</option>
</select>

CSS

body {
    background-color: #000000;
    margin: 5px;
    overflow: hidden;
}
h1 { font: 100 18px/28px Helvetica; color: #fff; margin: 0 0 0 5px; }

JavaScript

var mouseX = 0,
    mouseY = 0,

    windowHalfX = window.innerWidth / 2,
    windowHalfY = window.innerHeight / 2,

    SEPARATION = 200,
    AMOUNTX = 10,
    AMOUNTY = 10,

    camera, scene, renderer;

init();
animate();

for (var b in chroma.brewer) {
    $('<option>'+b+'</option>').appendTo('#brewer');
}

function init() {

    var container, separation = 100,
        amountX = 50,
        amountY = 50,
        particles, particle;

    var selected = $('#brewer').val();
    $('div').remove();
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(
        25, window.innerWidth / window.innerHeight, 1, 10000);
    /*camera = new THREE.OrthographicCamera(
        window.innerWidth / - 2,  window.innerWidth / 2,
        window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000);*/
    camera.position.z = 400;

    scene = new THREE.Scene();

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // particles

    var PI2 = Math.PI * 2;
    var material; 

    var brewer, i, col;
    for (brewer in chroma.brewer) {
        if (selected != 'all' && selected != brewer) continue;
        var geometry = new THREE.Geometry();
        for (i in chroma.brewer[brewer]) {
            col = chroma.hex(chroma.brewer[brewer][i]);
            material = new THREE.ParticleCanvasMaterial({
                color: parseInt(col.hex().substr(1), 16),
                program: function (context) {
                    context.beginPath();
                    context.arc(0, 0, 1, 0, PI2, true);
                    context.closePath();
                    context.fill();
                }
            });

            var m = $('#mode').val().toLowerCase();
            col = col[m]();
            var d = {
                lab: { x:-50, y: 0, z: 0, s: 1 },
                lch: { x:-50, y: -50, z: -180, s:...