Heatmaps

View full screen.

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

Heatmaps can also be generated by laying out bars in a grid, as shown in the Mean & Deviation example.

Next: Dymaxion Map

Source

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

body {
  background: #222;
}

#fig {
  width: 526px;
  height: 370px;
}

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

var w = heatmap[0].length,
    h = heatmap.length;

var vis = new pv.Panel()
    .width(w * 6)
    .height(h * 6)
    .margin(2)
    .strokeStyle("#aaa")
    .lineWidth(4)
    .antialias(false);

vis.add(pv.Image)
    .imageWidth(w)
    .imageHeight(h)
    .image(pv.Scale.linear()
        .domain(95, 115, 135, 155, 175, 195)
        .range("#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff")
        .by(function(i, j) heatmap[j][i]));

vis.render();

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

Data

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