Pointing

View full screen.

Rather than require exact mouseovers, as is traditionally done, the point behavior identifies the closest mark to the mouse, allowing more rapid target acquisition and more responsive details-on-demand. This concept is similar to “bubble” cursors by Grossman & Balakrishnan, CHI 2005.

In this example, we use pointing to display a detail label on a scatterplot. The point behavior can also be used with lines and areas, as in the earlier Minnesota Employment example.

Next: Spline Editor

Source

<html>
  <head>
    <title>Pointing</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="dot.js"></script>
    <style type="text/css">

#fig {
  width: 450px;
  height: 425px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">

/* Sizing and scales. */
var w = 400,
    h = 400,
    x = pv.Scale.linear(0, 99).range(0, w),
    y = pv.Scale.linear(0, 1).range(0, h),
    c = pv.Scale.linear(0, 1).range("orange", "brown");

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(20)
    .left(20)
    .right(30)
    .top(5)
    .events("all")
    .event("mousemove", pv.Behavior.point());

/* Y-axis and ticks. */
vis.add(pv.Rule)
    .data(y.ticks())
    .bottom(y)
    .strokeStyle(function(d) d ? "#eee" : "#000")
  .anchor("left").add(pv.Label)
    .visible(function(d) d > 0 && d < 1)
    .text(y.tickFormat);

/* X-axis and ticks. */
vis.add(pv.Rule)
    .data(x.ticks())
    .left(x)
    .strokeStyle(function(d) d ? "#eee" : "#000")
  .anchor("bottom").add(pv.Label)
    .visible(function(d) d > 0 && d < 100)
    .text(x.tickFormat);

/* The dot plot! */
vis.add(pv.Dot)
    .def("active", -1)
    .data(data)
    .left(function(d) x(d.x))
    .bottom(function(d) y(d.y))
    .strokeStyle(function(d) c(d.y))
    .fillStyle(function() this.strokeStyle().alpha(.2))
    .event("point", function() this.active(this.index).parent)
    .event("unpoint", function() this.active(-1).parent)
  .anchor("right").add(pv.Label)
    .visible(function() this.anchorTarget().active() == this.index)
    .text(function(d) d.y.toFixed(2));

vis.render();

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

Data

var data = pv.range(100).map(function(x) {
    return {x: x, y: Math.random(), z: Math.pow(10, 2 * Math.random())};
  });