Dot Charts

View full screen.

Scatterplots can facilitate visual analysis along multiple dimensions, though care should be taken to avoid interference. In this example, we encode three dimensions: two are encoded using position, while the third is redundantly encoded as both area and color. Mouseover any of the dots to read the exact values.

A useful extension of scatterplots is the scatterplot matrix, as shown in the Anderson's Flowers example.

Next: Pie & Donut Charts

Source

<html>
  <head>
    <title>Scatterplot</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.1"/>
    <script type="text/javascript" src="../protovis-r3.1.0.js"></script>
    <script type="text/javascript" src="dot.js"></script>
    <style type="text/css">
      #fig {
        width: 430px;
        height: 425px;
      }
    </style>
  </head>
  <body><div id="center"><div id="fig">
    <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.log(1, 100).range("orange", "brown");

      /* The root panel. */
      var vis = new pv.Panel()
          .width(w)
          .height(h)
          .bottom(20)
          .left(20)
          .right(10)
          .top(5);

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

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

      /* The dot plot! */
      var dot = vis.add(pv.Panel)
          .data(data)
        .add(pv.Dot)
          .left(function(d) x(d.x))
          .bottom(function(d) y(d.y))
          .strokeStyle(function(d) c(d.z))
          .fillStyle(function() this.strokeStyle().alpha(.2))
          .size(function(d) d.z)
          .title(function(d) d.z);

      vis.render();

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

Data

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