JSFiddle - React, Tailwind, and code Playground

Private Site Catalyst data visualization for CIT

by Admiral Potato

HTML

<script src="http://admiralpotato.github.io/js/npos3d/build/npos3d.min.js"></script>

JavaScript

var n = NPos3d;
var s = new n.Scene();

var loading = new n.VText({
	string: 'loading...'
});

s.add(loading);

var dataUrl = 'https://gist.github.com/AdmiralPotato/50b4078da9d8473e1e83/raw/86eb64cdf287bcd720a6a8961fe620575b491fe9/cit_sitemap.json';

var pageMap = {}; //by address - to be populated on load
var pageList = []; //by index - to be populated on load

var pageHolder = new n.Ob3D({
	scale: [4,4,4],
	renderAlways: true,
	shape: {}
});
pageHolder.update = function () {
	var t = this;
	t.rot[1] += deg * 0.5;
};
s.add(pageHolder);

var lineHolder = new n.Ob3D({
	renderAlways: true,
	shape: {
		// to be populated after load
		points: [],
		lines: []
	}
});
lineHolder.update = function(){
	//regen geom!
	this.lastGlobalCompositeMatrixString = false;
};
s.add(lineHolder);

var Page = function(args) {
	var t = this, type = 'Page';
	if(t.type !== type){throw type + ' constructor must be invoked using the `new` keyword.';}
	args = args || {};
	n.blessWith3DBase(t, args);
	t.address = args.address;
	t.segments = args.segments;
	t.parentAddress = args.parentAddress;
	t.name = args.name;
	t.label = new n.VText({
		pos: [0,-2,0],
		rot: [0,0,-90 * deg],
		scale: [0.001,0.001,0.001],
		string: t.name
	});
	//t.add(t.label);
	pageMap[t.address] = t;
	t.index = pageList.push(t) - 1;
	t.pos = [10, 0, t.index * 0.01];
	if(t.segments.length > 1){
		//console.log('P:', t.parentAddress, pageMap[t.parentAddress]);
		//console.log('C:', t.address);
		pageMap[t.parentAddress].add(t);
	} else {
		pageHolder.add(t);
	}
};

Page.prototype = {
	type: 'Page',
	color: '#f00',
	shape: {
		points: [
			[0,0,0]
		]
	},
	scale: [1.2,1.2,1.2],
	renderStyle: 'points',
	update: function () {
		var t = this;
		t.rot[2] += deg * 0.5;
		t.render();
	}
};

var recursiveMakePageFromPath = function (creationPath, globalIndex) {
	var chain, existingPath, parentPath, i, len, page;
	if ( pageMap[creationPath] === undefined ) {
		chain = creationPath.split(':');
		len = chain.length;
		//We need all...