Eyes

View full screen.

This example is adapted from the Processing Arctangent example. We demonstrate an equivalent technique for computing the vector from the dot center to the mouse using pv.Mark#mouse.

Next: Dendrograms

Source

<html>
  <head>
    <title>My God, it's full of eyes!</title>
    <link rel="stylesheet" type="text/css" href="ex.css"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <style type="text/css">

body {
  background: #222;
}

#fig {
  width: 200px;
  height: 200px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var vis = new pv.Panel()
    .width(200)
    .height(200)
    .fillStyle("#666")
    .strokeStyle("#ccc");

vis.add(pv.Panel)
    .data([{x:50, y:16, r:40},
           {x:64, y:85, r:20},
           {x:90, y:200, r:60},
           {x:150, y:44, r:20},
           {x:175, y:120, r:40}])
    .left(function(d) d.x)
    .top(function(d) d.y)
  .add(pv.Dot)
    .fillStyle("#fff")
    .strokeStyle(null)
    .size(function(d) d.r * d.r)
  .add(pv.Dot)
    .def("v", function(d) {
      var m = this.mouse();
      return (m.length() > d.r / 2) ? m.norm().times(d.r / 2) : m;
    })
    .fillStyle("#aaa")
    .left(function(d) this.v().x)
    .top(function(d) this.v().y)
    .size(function(d) d.r * d.r / 4);

vis.render();
pv.listen(self, "mousemove", function() vis.render());

    </script>
  </div></div></body>
</html>

Data

This example has no data, making it a meaningless (though fun) visualization!