Grid Layout

View full screen.

The R volcano data set gives topographic information for Auckland's Maungawhau volcano, also known as Mt. Eden. Here we reproduce a heatmap encoding elevation with a partitioned linear color scale.

The grid layout provides a convenient mechanism for positioning a two-dimensional grid of bars based on a two-dimensional array of data. Note, however, that when pixel manipulation support is added to Protovis heatmap visualizations will be more efficiently rendered as images.

Next: Job Voyager

Source

<html>
  <head>
    <title>Heatmap</title>
    <link rel="stylesheet" type="text/css" href="ex.css"/>
    <script type="text/javascript" src="../protovis-r3.1.0.js"></script>
    <script type="text/javascript" src="heatmap.js"></script>
    <style type="text/css">
      body {
        background: #222;
      }
      #fig {
        width: 522px;
        height: 366px;
      }
    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

      var vis = new pv.Panel()
          .width(heatmap[0].length * 6)
          .height(heatmap.length * 6);

      vis.add(pv.Bar)
          .extend(pv.Layout.grid(heatmap))
          .fillStyle(pv.Scale.linear()
              .domain(95, 115, 135, 155, 175, 195)
              .range("#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"));

      vis.render();

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

Data

Due to size, the data file is omitted from this example. See heatmap.js.