Bubbles

View full screen.

This example is adapted from the Processing Distance 2D example. We demonstrate an equivalent technique for computing the distance from the panel to the mouse using pv.Mark#mouse. One benefit of a pure-JavaScript approach is that user interface events that happen outside of the canvas—such as mouse movement—can still be captured by visualization.

Next: Eyes

Source

<html>
  <head>
    <title>Bubbles</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)
    .strokeStyle("#aaa");

vis.add(pv.Panel)
    .data(pv.range(0, 201, 20))
    .left(function(x) x)
  .add(pv.Panel)
    .data(pv.range(0, 201, 20))
    .top(function(y) y)
  .add(pv.Dot)
    .fillStyle("#fff")
    .strokeStyle(null)
    .size(function() this.mouse().length());

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!