ctakes-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jtgr...@apache.org
Subject svn commit: r1585156 [5/13] - in /ctakes/sandbox: ./ CollapsableDendrogram/ CollapsableDendrogram/d3/ Data/ Dendrogram/ NodeLinkTree/ ZoomablePack/
Date Sat, 05 Apr 2014 18:32:43 GMT
Added: ctakes/sandbox/CollapsableDendrogram/index.html
URL: http://svn.apache.org/viewvc/ctakes/sandbox/CollapsableDendrogram/index.html?rev=1585156&view=auto
==============================================================================
--- ctakes/sandbox/CollapsableDendrogram/index.html (added)
+++ ctakes/sandbox/CollapsableDendrogram/index.html Sat Apr  5 18:32:42 2014
@@ -0,0 +1,177 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <!-- link type="text/css" rel="stylesheet" href="style.css"/ -->
+    <script type="text/javascript" src="d3/d3.js"></script>
+    <script type="text/javascript" src="d3/d3.layout.js"></script>
+    <style type="text/css">
+
+      .node circle {
+        cursor: pointer;
+        fill: #fff;
+        stroke: steelblue;
+        stroke-width: 1.5px;
+      }
+      
+      .node text {
+        font-size: 11px;
+      }
+      
+      path.link {
+        fill: none;
+        stroke: #ccc;
+        stroke-width: 1.5px;
+      }
+
+    </style>
+  </head>
+  <body>
+
+    <script type="text/javascript">
+
+      var m = [20, 120, 20, 120],
+          w = 1280 - m[1] - m[3],
+          h = 1800 - m[0] - m[2],
+          i = 0,
+          root;
+      
+      var tree = d3.layout.tree()
+          .size([h, w]);
+      
+      var diagonal = d3.svg.diagonal()
+          .projection(function(d) { return [d.y, d.x]; });
+      
+      var vis = d3.select("body").append("svg:svg")
+          .attr("width", w + m[1] + m[3])
+          .attr("height", h + m[0] + m[2])
+        .append("svg:g")
+          .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+      
+      d3.json("flare.json", function(json) {
+        root = json;
+        root.x0 = h / 2;
+        root.y0 = 0;
+      
+        function toggleAll(d) {
+          if (d.children) {
+            d.children.forEach(toggleAll);
+            toggle(d);
+          }
+        }
+      
+        // Initialize the display to show a few nodes.
+        root.children.forEach(toggleAll);
+        //toggle(root.children[1]);
+        //toggle(root.children[1].children[2]);
+        //toggle(root.children[9]);
+        //toggle(root.children[9].children[0]);
+      
+        update(root);
+      });
+      
+      function update(source) {
+        var duration = d3.event && d3.event.altKey ? 5000 : 500;
+      
+        // Compute the new tree layout.
+        var nodes = tree.nodes(root).reverse();
+      
+        // Normalize for fixed-depth.
+        nodes.forEach(function(d) { d.y = d.depth * 180; });
+      
+        // Update the nodes…
+        var node = vis.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("svg:g")
+            .attr("class", "node")
+            .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0
+ ")"; })
+            .on("click", function(d) { toggle(d); update(d); });
+      
+        nodeEnter.append("svg:circle")
+            .attr("r", 1e-6)
+            .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff";
});
+      
+        nodeEnter.append("svg:text")
+            .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
+            .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", 4.5)
+            .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 = vis.selectAll("path.link")
+            .data(tree.links(nodes), function(d) { return d.target.id; });
+      
+        // Enter any new links at the parent's previous position.
+        link.enter().insert("svg:path", "g")
+            .attr("class", "link")
+            .attr("d", function(d) {
+              var o = {x: source.x0, y: source.y0};
+              return diagonal({source: o, target: o});
+            })
+          .transition()
+            .duration(duration)
+            .attr("d", diagonal);
+      
+        // 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;
+        });
+      }
+      
+      // Toggle children.
+      function toggle(d) {
+  if (d.children) {
+    d._children = d.children;
+    d.children = null;
+  } else {
+    d.children = d._children;
+    d._children = null;
+  }
+}
+
+    </script>
+  </body>
+</html>

Added: ctakes/sandbox/CollapsableDendrogram/style.css
URL: http://svn.apache.org/viewvc/ctakes/sandbox/CollapsableDendrogram/style.css?rev=1585156&view=auto
==============================================================================
--- ctakes/sandbox/CollapsableDendrogram/style.css (added)
+++ ctakes/sandbox/CollapsableDendrogram/style.css Sat Apr  5 18:32:42 2014
@@ -0,0 +1,89 @@
+body {
+  background: url(texture-noise.png);
+  overflow: hidden;
+  margin: 0;
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica;
+}
+
+#chart, #header, #footer {
+  position: absolute;
+  top: 0;
+}
+
+#header, #footer {
+  z-index: 1;
+  display: block;
+  font-size: 36px;
+  font-weight: 300;
+  text-shadow: 0 1px 0 #fff;
+}
+
+#header.inverted, #footer.inverted {
+  color: #fff;
+  text-shadow: 0 1px 4px #000;
+}
+
+#header {
+  top: 80px;
+  left: 140px;
+  width: 1000px;
+}
+
+#footer {
+  top: 680px;
+  right: 140px;
+  text-align: right;
+}
+
+rect {
+  fill: none;
+  pointer-events: all;
+}
+
+pre {
+  font-size: 18px;
+}
+
+line {
+  stroke: #000;
+  stroke-width: 1.5px;
+}
+
+.string, .regexp {
+  color: #f39;
+}
+
+.keyword {
+  color: #00c;
+}
+
+.comment {
+  color: #777;
+  font-style: oblique;
+}
+
+.number {
+  color: #369;
+}
+
+.class, .special {
+  color: #1181B8;
+}
+
+a:link, a:visited {
+  color: #000;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #666;
+}
+
+.hint {
+  position: absolute;
+  right: 0;
+  width: 1280px;
+  font-size: 12px;
+  color: #999;
+}



Mime
View raw message