diff --git a/build/demo/add.js b/build/demo/add.js
index 94b9f3c..0e5e39a 100644
--- a/build/demo/add.js
+++ b/build/demo/add.js
@@ -1,60 +1,14 @@
 'use strict';
 
+var data = new Trie();
+
+data.add('go');
+data.add('get');
+data.add('boo');
+data.add('ba');
+
 document.addEventListener('DOMContentLoaded', function () {
-  var WIDTH = 700;
-  var HEIGHT = 600;
-  var MARGIN = 100;
-
-  var svg = d3.select('body').append('svg').attr('width', WIDTH + MARGIN).attr('height', HEIGHT + MARGIN).attr('viewBox', '-' + MARGIN / 2 + ' -' + MARGIN / 2 + ' ' + WIDTH + ' ' + HEIGHT);
-
-  svg.append('g').attr('class', 'lines');
-
-  var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
-
   draw();
-
-  function draw() {
-    console.dir(data.root);
-    var nodes = tree.nodes(data.root);
-    var links = tree.links(nodes);
-
-    var linkElements = svg.select('g.lines').selectAll('line').data(links);
-    linkElements.exit().remove();
-    linkElements.enter().append('line');
-
-    linkElements.attr('x1', function (d) {
-      return d.source.x;
-    }).attr('y1', function (d) {
-      return d.source.y;
-    }).attr('x2', function (d) {
-      return d.target.x;
-    }).attr('y2', function (d) {
-      return d.target.y;
-    }).style('stroke', 'rgb(72, 213, 91)').style('stroke-width', '2px');
-
-    var nodeElements = svg.selectAll('g.node').data(nodes);
-    nodeElements.exit().remove();
-    var nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
-
-    nodeElements.attr('transform', function (d) {
-      return 'translate(' + d.x + ', ' + d.y + ')';
-    }).style('font-family', 'monospace').style('font-size', '11px').attr('data-word', function (d) {
-      return d.name;
-    });
-
-    nodesEnter.append('circle');
-
-    var circles = nodeElements.selectAll('circle');
-    circles.attr('r', 25).style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').attr('r', 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', 25);
-
-    nodesEnter.append('text');
-    var texts = svg.selectAll('g.node text').data(nodes);
-
-    texts.attr('dy', 5).html(function (d) {
-      return '<tspan>' + d.name.split('').join('</tspan><tspan>') + '</tspan>';
-    }).attr('text-anchor', 'middle').style('fill', 'white');
-  }
-
   // Form and other stuff
 
   var form = document.querySelector('form');
diff --git a/build/demo/colors.js b/build/demo/colors.js
new file mode 100644
index 0000000..3d10ac2
--- /dev/null
+++ b/build/demo/colors.js
@@ -0,0 +1,19 @@
+'use strict';
+
+var data = new Trie();
+
+data.add('colors');
+data.add('coffee');
+data.add('codecs');
+
+data.add('boo');
+data.add('boloss');
+data.add('badass');
+
+data.add('rebecca');
+data.add('robots');
+data.add('rio');
+
+document.addEventListener('DOMContentLoaded', function () {
+  draw();
+});
diff --git a/build/demo/draw.js b/build/demo/draw.js
new file mode 100644
index 0000000..094ad6c
--- /dev/null
+++ b/build/demo/draw.js
@@ -0,0 +1,52 @@
+'use strict';
+
+var WIDTH = 800;
+var HEIGHT = 600;
+var MARGIN = 100;
+
+var svg = d3.select('body').append('svg').attr('width', WIDTH + MARGIN).attr('height', HEIGHT + MARGIN).attr('viewBox', '-' + MARGIN / 2 + ' -' + MARGIN / 2 + ' ' + WIDTH + ' ' + HEIGHT);
+
+svg.append('g').attr('class', 'lines');
+
+var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
+
+function draw() {
+  var nodes = tree.nodes(data.root);
+  var links = tree.links(nodes);
+
+  var linkElements = svg.select('g.lines').selectAll('line').data(links);
+  linkElements.exit().remove();
+  linkElements.enter().append('line');
+
+  linkElements.attr('x1', function (d) {
+    return d.source.x;
+  }).attr('y1', function (d) {
+    return d.source.y;
+  }).attr('x2', function (d) {
+    return d.target.x;
+  }).attr('y2', function (d) {
+    return d.target.y;
+  }).style('stroke', 'rgb(72, 213, 91)').style('stroke-width', '2px');
+
+  var nodeElements = svg.selectAll('g.node').data(nodes);
+  nodeElements.exit().remove();
+  var nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
+
+  nodeElements.attr('transform', function (d) {
+    return 'translate(' + d.x + ', ' + d.y + ')';
+  }).style('font-family', 'monospace').style('font-size', '11px').attr('data-word', function (d) {
+    return d.name;
+  });
+
+  nodesEnter.append('circle');
+
+  var circles = nodeElements.selectAll('circle');
+  circles.attr('r', 25).style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').style('fill', 'rgb(28, 236, 166)').style('stroke', 'rgb(17, 172, 144)').attr('r', 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', 25);
+
+  nodesEnter.append('text');
+  var texts = svg.selectAll('g.node text').data(nodes);
+
+  texts.attr('dy', 5).html(function (d) {
+    return '<tspan>' + d.name.split('').join('</tspan><tspan>') + '</tspan>';
+  }).attr('text-anchor', 'middle').style('fill', 'white');
+}
diff --git a/demo/add.html b/demo/add.html
index 32f12ec..3170545 100644
--- a/demo/add.html
+++ b/demo/add.html
@@ -105,5 +105,5 @@
 
 <script src='../build/libs/d3.js'></script>
 <script src='../build/trie.js'></script>
-<script src='../build/demo/data.js'></script>
+<script src='../build/demo/draw.js'></script>
 <script src='../build/demo/add.js'></script>
diff --git a/demo/add.js b/demo/add.js
index 3a9c925..b50d90c 100644
--- a/demo/add.js
+++ b/demo/add.js
@@ -1,69 +1,12 @@
+let data = new Trie();
+
+data.add('go');
+data.add('get');
+data.add('boo');
+data.add('ba');
+
 document.addEventListener('DOMContentLoaded', () => {
-  const WIDTH = 700;
-  const HEIGHT = 600;
-  const MARGIN = 100;
-
-  let svg = d3.select('body').append('svg')
-    .attr('width', WIDTH + MARGIN)
-    .attr('height', HEIGHT + MARGIN)
-    .attr('viewBox', `-${MARGIN / 2} -${MARGIN / 2} ${WIDTH} ${HEIGHT}`);
-
-  svg.append('g').attr('class', 'lines');
-
-  let tree = d3.layout.tree()
-    .size([WIDTH - MARGIN, HEIGHT - MARGIN]);
-
   draw();
-
-  function draw() {
-    console.dir(data.root);
-    let nodes = tree.nodes(data.root);
-    let links = tree.links(nodes);
-
-    let linkElements = svg.select('g.lines').selectAll('line').data(links);
-    linkElements.exit().remove();
-    linkElements.enter().append('line');
-
-    linkElements.attr('x1', d => d.source.x)
-      .attr('y1', d => d.source.y)
-      .attr('x2', d => d.target.x)
-      .attr('y2', d => d.target.y)
-      .style('stroke', 'rgb(72, 213, 91)')
-      .style('stroke-width', '2px');
-
-    let nodeElements = svg.selectAll('g.node').data(nodes);
-    nodeElements.exit().remove();
-    let nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
-
-    nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
-      .style('font-family', 'monospace')
-      .style('font-size', '11px')
-      .attr('data-word', d => d.name);
-
-    nodesEnter.append('circle');
-
-    let circles = nodeElements.selectAll('circle');
-    circles.attr('r', 25)
-      .style('fill', 'rgb(28, 236, 166)')
-      .style('stroke', 'rgb(17, 172, 144)')
-      .style('fill', 'rgb(28, 236, 166)')
-      .style('stroke', 'rgb(17, 172, 144)')
-      .attr('r', 10)
-      .transition()
-      .ease(d3.ease('elastic'))
-      .duration(700)
-      .attr('r', 25);
-
-
-    nodesEnter.append('text');
-    let texts = svg.selectAll('g.node text').data(nodes);
-
-    texts.attr('dy', 5)
-      .html(d => `<tspan>${d.name.split('').join('</tspan><tspan>')}</tspan>`)
-      .attr('text-anchor', 'middle')
-      .style('fill', 'white');
-  }
-
   // Form and other stuff
 
   const form = document.querySelector('form');
diff --git a/demo/colors.html b/demo/colors.html
new file mode 100644
index 0000000..b1ef038
--- /dev/null
+++ b/demo/colors.html
@@ -0,0 +1,11 @@
+<head>
+  <title>Colors Trie</title>
+</head>
+
+<body>
+  
+<script src='../build/libs/d3.js'></script>
+<script src='../build/trie.js'></script>
+<script src='../build/demo/draw.js'></script>
+<script src='../build/demo/colors.js'></script>
+</body>
diff --git a/demo/colors.js b/demo/colors.js
new file mode 100644
index 0000000..4dc311a
--- /dev/null
+++ b/demo/colors.js
@@ -0,0 +1,17 @@
+let data = new Trie();
+
+data.add('colors');
+data.add('coffee');
+data.add('codecs');
+
+data.add('boo');
+data.add('boloss');
+data.add('badass');
+
+data.add('rebecca');
+data.add('robots');
+data.add('rio');
+
+document.addEventListener('DOMContentLoaded', () => {
+  draw();
+});
diff --git a/demo/data.js b/demo/data.js
deleted file mode 100644
index ab29677..0000000
--- a/demo/data.js
+++ /dev/null
@@ -1,13 +0,0 @@
-window.data = new Trie();
-
-data.add('colors');
-data.add('coffee');
-// data.add('codecs');
-
-data.add('boo');
-// data.add('boloss');
-// data.add('badass');
-
-// data.add('rebecca');
-// data.add('robots');
-// data.add('rio');
diff --git a/demo/draw.js b/demo/draw.js
new file mode 100644
index 0000000..1740c62
--- /dev/null
+++ b/demo/draw.js
@@ -0,0 +1,61 @@
+const WIDTH = 800;
+const HEIGHT = 600;
+const MARGIN = 100;
+
+let svg = d3.select('body').append('svg')
+  .attr('width', WIDTH + MARGIN)
+  .attr('height', HEIGHT + MARGIN)
+  .attr('viewBox', `-${MARGIN / 2} -${MARGIN / 2} ${WIDTH} ${HEIGHT}`);
+
+svg.append('g').attr('class', 'lines');
+
+let tree = d3.layout.tree()
+  .size([WIDTH - MARGIN, HEIGHT - MARGIN]);
+
+function draw() {
+  let nodes = tree.nodes(data.root);
+  let links = tree.links(nodes);
+
+  let linkElements = svg.select('g.lines').selectAll('line').data(links);
+  linkElements.exit().remove();
+  linkElements.enter().append('line');
+
+  linkElements.attr('x1', d => d.source.x)
+    .attr('y1', d => d.source.y)
+    .attr('x2', d => d.target.x)
+    .attr('y2', d => d.target.y)
+    .style('stroke', 'rgb(72, 213, 91)')
+    .style('stroke-width', '2px');
+
+  let nodeElements = svg.selectAll('g.node').data(nodes);
+  nodeElements.exit().remove();
+  let nodesEnter = nodeElements.enter().append('g').attr('class', 'node');
+
+  nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
+    .style('font-family', 'monospace')
+    .style('font-size', '11px')
+    .attr('data-word', d => d.name);
+
+  nodesEnter.append('circle');
+
+  let circles = nodeElements.selectAll('circle');
+  circles.attr('r', 25)
+    .style('fill', 'rgb(28, 236, 166)')
+    .style('stroke', 'rgb(17, 172, 144)')
+    .style('fill', 'rgb(28, 236, 166)')
+    .style('stroke', 'rgb(17, 172, 144)')
+    .attr('r', 10)
+    .transition()
+    .ease(d3.ease('elastic'))
+    .duration(700)
+    .attr('r', 25);
+
+
+  nodesEnter.append('text');
+  let texts = svg.selectAll('g.node text').data(nodes);
+
+  texts.attr('dy', 5)
+    .html(d => `<tspan>${d.name.split('').join('</tspan><tspan>')}</tspan>`)
+    .attr('text-anchor', 'middle')
+    .style('fill', 'white');
+}