diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
new file mode 100644
index 0000000..88d1388
--- /dev/null
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -0,0 +1,201 @@
+(function () {
+  'use strict';
+
+  angular.module('xos.serviceTopology')
+  .directive('serviceCanvas', function(){
+    return {
+      restrict: 'E',
+      scope: {},
+      bindToController: true,
+      controllerAs: 'vm',
+      templateUrl: 'templates/topology_canvas.tpl.html',
+      controller: function($element, $window, d3, serviceTopologyConfig){
+
+        // count the mas depth of an object
+        const depthOf = (obj) => {
+          var depth = 0;
+          if (obj.children) {
+            obj.children.forEach(function (d) {
+              var tmpDepth = depthOf(d);
+              if (tmpDepth > depth) {
+                depth = tmpDepth
+              }
+            })
+          }
+          return 1 + depth
+        };
+
+        const treeData = [
+          {
+            'name': 'Top Level',
+            'parent': 'null',
+            'children': [
+              {
+                'name': 'Level 2: A',
+                'parent': 'Top Level',
+                'children': [
+                  {
+                    'name': 'Son of A',
+                    'parent': 'Level 2: A'
+                  },
+                  {
+                    'name': 'Daughter of A',
+                    'parent': 'Level 2: A'
+                  }
+                ]
+              },
+              {
+                'name': 'Level 2: B',
+                'parent': 'Top Level'
+              }
+            ]
+          }
+        ];
+
+        const width = $window.innerWidth - serviceTopologyConfig.widthMargin;
+        const height = $window.innerHeight - serviceTopologyConfig.heightMargin;
+
+        const tree = d3.layout.tree()
+          .size([height, width]);
+
+        const diagonal = d3.svg.diagonal()
+          .projection(d => [d.y, d.x]);
+
+        const svg = d3.select($element[0])
+          .append('svg')
+          .style('width', `${$window.innerWidth}px`)
+          .style('height', `${$window.innerHeight}px`)
+          .append('g')
+          .attr("transform", "translate(" + serviceTopologyConfig.widthMargin+ "," + serviceTopologyConfig.heightMargin + ")");;
+
+        const resizeCanvas = () => {
+          var targetSize = svg.node().getBoundingClientRect();
+
+          d3.select(self.frameElement)
+            .attr('width', `${targetSize.width}px`)
+            .attr('height', `${targetSize.height}px`)
+        };
+
+        //d3.select(window)
+        //  .on('load', () => {
+        //    resizeCanvas();
+        //  });
+        //d3.select(window)
+        //  .on('resize', () => {
+        //    resizeCanvas();
+        //    update(root);
+        //  });
+
+        var root = treeData[0];
+        root.x0 = $window.innerHeight / 2;
+        root.y0 = 0;
+
+        var i = 0;
+        var duration = 750;
+
+        update(root);
+
+        function update(source) {
+
+          const maxDepth = depthOf(source);
+
+          // Compute the new tree layout.
+          var nodes = tree.nodes(root).reverse(),
+            links = tree.links(nodes);
+
+          // Normalize for fixed-depth.
+          nodes.forEach(function(d) {
+            console.log(d);
+            // 180 should be based on window.width and max node depth
+
+            d.y = d.depth * (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+            console.log(d.x);
+          });
+
+          // Update the nodes…
+          var node = svg.selectAll('g.node')
+            .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+          // Enter any new nodes at the parent's previous position.
+          var nodeEnter = node.enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', function(d) {
+              // this is the starting position
+              return 'translate(' + source.y0 + ',' + source.x0 + ')';
+            });
+            //.on('click', click);
+
+          nodeEnter.append('circle')
+            .attr('r', 1e-6)
+            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+
+          nodeEnter.append('text')
+            .attr('x', function(d) { return d.children || d._children ? -13 : 13; })
+            .attr('dy', '.35em')
+            .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start'; })
+            .text(function(d) { return d.name; })
+            .style('fill-opacity', 1e-6);
+
+          // Transition nodes to their new position.
+          var nodeUpdate = node.transition()
+            .duration(duration)
+            .attr('transform', function(d) {
+              return 'translate(' + d.y + ',' + d.x + ')';
+            });
+
+          nodeUpdate.select('circle')
+            .attr('r', 10)
+            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+
+          nodeUpdate.select('text')
+            .style('fill-opacity', 1);
+
+          // Transition exiting nodes to the parent's new position.
+          var nodeExit = node.exit().transition()
+            .duration(duration)
+            .attr('transform', function(d) { return 'translate(' + source.y + ',' + source.x + ')'; })
+            .remove();
+
+          nodeExit.select('circle')
+            .attr('r', 1e-6);
+
+          nodeExit.select('text')
+            .style('fill-opacity', 1e-6);
+
+          // Update the links…
+          var link = svg.selectAll('path.link')
+            .data(links, function(d) { return d.target.id; });
+
+          // Enter any new links at the parent's previous position.
+          link.enter().insert('path', 'g')
+            .attr('class', 'link')
+            .attr('d', function(d) {
+              var o = {x: source.x0, y: source.y0};
+              return diagonal({source: o, target: o});
+            });
+
+          // Transition links to their new position.
+          link.transition()
+            .duration(duration)
+            .attr('d', diagonal);
+
+          // Transition exiting nodes to the parent's new position.
+          link.exit().transition()
+            .duration(duration)
+            .attr('d', function(d) {
+              var o = {x: source.x, y: source.y};
+              return diagonal({source: o, target: o});
+            })
+            .remove();
+
+          // Stash the old positions for transition.
+          nodes.forEach(function(d) {
+            d.x0 = d.x;
+            d.y0 = d.y;
+          });
+        }
+      }
+    }
+  });
+
+}());
\ No newline at end of file