data instaed of colors

build/demo/data.js

@@ -1,15 +1,41 @@
-'use strict';
+"use strict";
 
-window.data = new Trie();
+var data = new Trie();
 
-data.add('colors');
+var json = {
-data.add('coffee');
+  "color": ["red", "rebecca", "blue", "cyan", "pink", "purple", "teal", "black", "white", "orange", "yellow", "green"],
-// data.add('codecs');
+  "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott", "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+  "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail", "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora", "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+};
 
-data.add('boo');
+for (var category in json) {
-// data.add('boloss');
+  var _iteratorNormalCompletion = true;
-// data.add('badass');
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
 
-// data.add('rebecca');
+  try {
-// data.add('robots');
+    for (var _iterator = json[category][Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-// data.add('rio');
+      var item = _step.value;
+
+      var node = data.add(item);
+      node.category = category;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator["return"]) {
+        _iterator["return"]();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  draw(true);
+});

build/demo/draw.js

@@ -10,7 +10,7 @@ svg.append('g').attr('class', 'lines');
 
 var tree = d3.layout.tree().size([WIDTH - MARGIN, HEIGHT - MARGIN]);
 
-function draw() {
+function draw(small) {
   var nodes = tree.nodes(data.root);
   var links = tree.links(nodes);
 
@@ -34,14 +34,14 @@ function draw() {
 
   nodeElements.attr('transform', function (d) {
     return 'translate(' + d.x + ', ' + d.y + ')';
-  }).style('font-family', 'monospace').style('font-size', '11px').attr('data-word', function (d) {
+  }).style('font-family', 'monospace').style('font-size', (small ? '6' : '11') + 'px').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);
+  circles.attr('r', small ? 15 : 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', small ? 5 : 10).transition().ease(d3.ease('elastic')).duration(700).attr('r', small ? 15 : 25);
 
   nodesEnter.append('text');
   var texts = svg.selectAll('g.node text').data(nodes);

demo/colors.js

@@ -1,17 +0,0 @@
-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();
-});

demo/data.html

@@ -7,5 +7,5 @@
 <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>
+<script src='../build/demo/data.js'></script>
 </body>

demo/data.js

@@ -0,0 +1,22 @@
+let data = new Trie();
+
+let json = {
+  "color": ["red", "rebecca", "blue", "cyan", "pink", "purple",
+            "teal", "black", "white", "orange", "yellow", "green"],
+  "name": ["Jack", "James", "Alex", "Adam", "Mahdi", "Josh", "Scott",
+           "Pat", "Vincent", "Daniel", "Patrick", "Tim"],
+  "app": ["Atom", "Sublime", "Firefox", "Chrome", "Safari", "Mail",
+          "Blender", "Sketch", "Slack", "Finder", "Nightly", "Aurora",
+          "f.lux", "LookUp", "WunderList", "Instagram", "Toggl"]
+};
+
+for (let category in json) {
+  for (let item of json[category]) {
+    let node = data.add(item);
+    node.category = category;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  draw(true);
+});

demo/draw.js

@@ -12,7 +12,7 @@ svg.append('g').attr('class', 'lines');
 let tree = d3.layout.tree()
   .size([WIDTH - MARGIN, HEIGHT - MARGIN]);
 
-function draw() {
+function draw(small) {
   let nodes = tree.nodes(data.root);
   let links = tree.links(nodes);
 
@@ -33,22 +33,22 @@ function draw() {
 
   nodeElements.attr('transform', d => `translate(${d.x}, ${d.y})`)
     .style('font-family', 'monospace')
-    .style('font-size', '11px')
+    .style('font-size', (small ? '6' : '11') + 'px')
     .attr('data-word', d => d.name);
 
   nodesEnter.append('circle');
 
   let circles = nodeElements.selectAll('circle');
-  circles.attr('r', 25)
+  circles.attr('r', small ? 15 : 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)
+    .attr('r', small ? 5 : 10)
     .transition()
     .ease(d3.ease('elastic'))
     .duration(700)
-    .attr('r', 25);
+    .attr('r', small ? 15 : 25);
 
 
   nodesEnter.append('text');