Dan Tocchini IV d4tocchini

This is an example of a collapsible drag and drop tree implementing slightly modified code from https://gist.github.com/robschmuecker/7880033

This is posted in order to demonstrate a viable answer for a Stack Overflow question http://stackoverflow.com/questions/20539922/has-anyone-produced-a-virtualised-javascript-tree-for-thousands-of-nodes

The only difference between this gist and the one referenced above is that the JSON file has changed. Each node contains 15 children and the depth is 4. Hence over 50,000 nodes.

The performance is fine if not too many of the nodes are present at once in the DOM. The JSON was contructed at http://www.json-generator.com/ with the following markup

Post

plus
video url
call to action What is the most important action you want people to do on your site? Buy now? Sign up? Learn more? Whatever it is, you need a prominent link that drives people to accomplish that action - you need a Call to Action!
crowdfunding campaign
goal

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>binary search #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>typed array or not, with or without allocating size #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	.imac {
	/* apply imac image as fluid border image around figure */
	border-width: 34px 34px 163px 34px;
	-moz-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
	-webkit-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
	-o-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
	border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 fill repeat;
	margin-left: -34px !important;
	box-sizing: content-box !important;
	}

	$.section class:"3pronged #{@classes.split(' ')}"

	variant '3posts_w_media'

	for post in @posts.eat(3)
	$.article
	$.h1 post.h1.eat(1)
	$.h2 post.h2.eat(1)
	$.text post.text.eat(1)
	$.image post.media.eat(1).eat(1, type:'image')

	{
	var p;

	p = this;

	p.toString = function (x) {
	if (typeof x === "string") {return x}
	if (x instanceof Array) {return x.join("")}
	return ""
	}

	@h \|- (.box)-10-... - (#box2) (#box3)-\| gap([gap]) in(#container) {

	width: == &:next[width]; // replacement for chain-width()

	top: == ::window[top]; // replacement for chain-top(::window[top])
	}

	handleMutations: (mutations) =>
	for m in mutations
	for node in m.removedNodes
	doSomethingToRemoved node
	for node in m.addedNodes
	doSomethingToAdded node
	if m.type is "characterData" or m.type is "attributes" or m.type is "childList"
	doSomethingWithType(m)
	observer = new MutationObserver handleMutations
	observer.observe(document.getElementById('graph'), {subtree: true, childList: true, attributes: false, characterData: false})