JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <title>NN SVG</title>

</head>
<body>

    <div id="graph-container"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
</body>

</html>

CSS

* { font-weight: 100; }
        h1 { font-weight: 100; }
        canvas {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
        }

        .nn-picker {
            width: 410px;
            margin: 30px;
            z-index: 1000;
        }
        .github-corner {
            z-index: 1000;
        }

        [data-toggle="collapse"] .fa:before {
            font-size: 2rem;
            color: black;
            content: "\f106";
            position: relative;
            top: 5px;
        }
        .fa {
          transition: 0.3s transform ease-in-out;
        }
        .collapsed .fa {
          transform: rotate(-180deg);
        }
        .tab-content {
            padding: 20px;
        }
        input[type="range"] {
            margin-left: 10px;
        }
        #count {
            position: fixed;
            bottom: 0;
            right: 1rem;
            opacity: 0.4;
            font-weight: 100;
        }

JavaScript

// /////////////////////////////////////////////////////////////////////////////
//                     ///////    Helper Functions    ///////
// /////////////////////////////////////////////////////////////////////////////

let range = n => [...Array(n).keys()];

let nWise = (n, array) => {
  iterators = Array(n).fill().map(() => array[Symbol.iterator]());
  iterators.forEach((it, index) => Array(index).fill().forEach(() => it.next()));
  return Array(array.length - n + 1).fill().map(() => (iterators.map(it => it.next().value)));
};

let pairWise = (array) => nWise(2, array);

Array.prototype.last = function() { return this[this.length - 1]; };

let sum = (arr) => arr.reduce((a,b)=>a+b);

let rand = (min, max) => Math.random() * (max - min) + min;


// /////////////////////////////////////////////////////////////////////////////
//                       ///////    Variables    ///////
// /////////////////////////////////////////////////////////////////////////////

var w = window.innerWidth;
var h = window.innerHeight;

var color1 = '#eeeeee';
var color2 = '#99ddff';
var color3 = '#ffbbbb';

var rectOpacity = 0.4;
var strideOpacity = 0.4;

var line_material = new THREE.LineBasicMaterial( { 'color':0x000000 } );
var box_material = new THREE.MeshBasicMaterial( {'color':color1, 'side':THREE.DoubleSide, 'transparent':true, 'opacity':rectOpacity, 'depthWrite':false, 'needsUpdate':true} );
var conv_material = new THREE.MeshBasicMaterial( {'color':color2, 'side':THREE.DoubleSide, 'transparent':true, 'opacity':strideOpacity, 'depthWrite':false, 'needsUpdate':true} );
var pyra_material = new THREE.MeshBasicMaterial( {'color':color3, 'side':THREE.DoubleSide, 'transparent':true, 'opacity':strideOpacity, 'depthWrite':false, 'needsUpdate':true} );


var betweenLayers = 20;

var logarithmicDepth = true;
var depthScale = 10;
var logarithmicWidth = true;
var widthScale = 10;
var logarithmicConvSize = false;
var convScale = 1;

var showDims = true;

let depthFn = (depth) =>...