Sha256: dcb68b61c0d44470e5211e70e7f0181df91a262c95dabab605f776c3fade06d0

Contents?: true

Size: 1.71 KB

Versions: 1

Compression:

Stored size: 1.71 KB

Contents

<html>
  <head>
    <title>Diamond Force</title>
    <script type="text/javascript" src="../../protovis-d3.3.js"></script>
    <script type="text/javascript" src="../diamond.js"></script>
    <link type="text/css" href="../style.css" rel="stylesheet"/>
  </head>
  <body>
    <script type="text/javascript+protovis">

function activate(d, value) {
  d.active = value;
  if (d.parentNode) activate(d.parentNode, value);
}

var vis = new pv.Panel()
    .data(pv.range(1, 4))
    .width(500)
    .height(100)
    .margin(5)
    .fillStyle("#fff")
    .strokeStyle("#ccc")
    .event("mousemove", pv.Behavior.point());

var layout = vis.add(pv.Layout.Force)
    .nodes(function(i) pv.dom(diamond(i, i, i)).nodes())
    .links(pv.Layout.Hierarchy.links)
    .bound(true)
    .iterations(1e3);

layout.link.add(pv.Line)
    .strokeStyle(function(d) d.active  ? "orange" : "lightgrey");

layout.node.add(pv.Dot)
    .fillStyle(function(d) d.parentNode ? d.active ? "orange" : "white" : "steelblue")
    .event("point", function(d) (activate(d, true), layout))
    .event("unpoint", function(d) (activate(d, false), layout));

vis.add(pv.Label)
    .bottom(0)
    .text(function(i) "b = " + i);

vis.render();

    </script><p>

      This example demonstrates computing a static force-directed layout that is
      bounded by the containing panel, as well as dynamic properties for nodes
      and links. The data set is the diamond tree used in other examples, with
      links between parents and their children. The layout is computed using
      1,000 iterations.<p>

      Although the layout is static, this example is interactive. Using the
      point and unpoint events, we can highlight the active node and its tree
      ancestors.

  </body>
</html>

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
rubyvis-0.1.1 vendor/tests/layout/force2.html