A graphical toolkit for visualization
Protovis
Overview
Examples
Documentation
Download
Index
« Previous / Next »

Anderson’s Flowers

View full screen.

A matrix of scatterplots is well-suited to visualize Edgar Anderson’s data on Iris flowers in the Gaspé Peninsula. Here we can easily see how the three species of Iris cluster in any two dimensions: sepal width, sepal length, petal width and petal length. Iris setosa is shown with a red dot, versicolor in green and virginica in blue. Note that some of the data points overlap; alpha blending improves perceptibility of colocated dots.

This style of chart is modeled after R’s pairs plot. This example is extended to demonstrate brushing + linking.

Next: Becker’s Barley

Source

<html>
  <head>
    <title>Anderson&rsquo;s Flowers</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="flowers.js"></script>
    <style type="text/css">

#fig {
  width: 680px;
  height: 705px;
}

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

/* Size parameters. */
var size = 150,
    padding = 20;

/* Scales for color and position. */
var color = pv.colors(
        "rgba(50%, 0%, 0%, .5)",
        "rgba(0%, 50%, 0%, .5)",
        "rgba(0%, 0%, 50%, .5)");
    position = pv.dict(traits, function(t)
        pv.Scale.linear(flowers, function(d) d[t])
        .range(0, size));

/* Root panel. */
var vis = new pv.Panel()
    .width((size + padding) * traits.length)
    .height((size + padding) * traits.length + padding)
    .left(10)
    .top(5);

/* One cell per trait pair. */
var cell = vis.add(pv.Panel)
    .data(traits)
    .top(function() this.index * (size + padding) + padding / 2)
    .height(size)
  .add(pv.Panel)
    .data(function(y) traits.map(function(x) ({px:x, py:y})))
    .left(function() this.index * (size + padding) + padding / 2)
    .width(size);

/* Framed dot plots not along the diagonal. */
var plot = cell.add(pv.Panel)
    .visible(function(t) t.px != t.py)
    .strokeStyle("#aaa");

/* X-axis ticks. */
var xtick = plot.add(pv.Rule)
    .data(function(t) position[t.px].ticks(5))
    .left(function(d, t) position[t.px](d))
    .strokeStyle("#eee");

/* Bottom label. */
xtick.anchor("bottom").add(pv.Label)
    .visible(function() (cell.parent.index == traits.length - 1) && !(cell.index & 1))
    .text(function(d, t) position[t.px].tickFormat(d));

/* Top label. */
xtick.anchor("top").add(pv.Label)
    .visible(function() (cell.parent.index == 0) && (cell.index & 1))
    .text(function(d, t) position[t.px].tickFormat(d));

/* Y-axis ticks. */
var ytick = plot.add(pv.Rule)
    .data(function(t) position[t.py].ticks(5))
    .bottom(function(d, t) position[t.py](d))
    .strokeStyle("#eee");

/* Left label. */
ytick.anchor("left").add(pv.Label)
    .visible(function() (cell.index == 0) && (cell.parent.index & 1))
    .text(function(d, t) position[t.py].tickFormat(d));

/* Right label. */
ytick.anchor("right").add(pv.Label)
    .visible(function() (cell.index == traits.length - 1) && !(cell.parent.index & 1))
    .text(function(d, t) position[t.py].tickFormat(d));

/* Frame and dot plot. */
plot.add(pv.Dot)
    .data(flowers)
    .left(function(d, t) position[t.px](d[t.px]))
    .bottom(function(d, t) position[t.py](d[t.py]))
    .size(10)
    .strokeStyle(null)
    .fillStyle(function(d) color(d.species));

/* Labels along the diagonal. */
cell.anchor("center").add(pv.Label)
    .visible(function(t) t.px == t.py)
    .font("bold 14px sans-serif")
    .text(function(t) t.px.replace(/([WL])/, " $1").toLowerCase());

/* Legend. */
vis.add(pv.Dot)
    .data(species)
    .bottom(10)
    .left(function() 15 + this.index * 65)
    .size(8)
    .strokeStyle(null)
    .fillStyle(color)
  .anchor("right").add(pv.Label);

vis.render();

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

Data

var species = ["setosa", "versicolor", "virginica"];
var traits = ["sepalLength", "sepalWidth", "petalLength", "petalWidth"];
var flowers = [
  {sepalLength: 5.1, sepalWidth: 3.5, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.9, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.7, sepalWidth: 3.2, petalLength: 1.3, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.6, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.6, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.4, sepalWidth: 3.9, petalLength: 1.7, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 4.6, sepalWidth: 3.4, petalLength: 1.4, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.4, sepalWidth: 2.9, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.9, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.1, species: "setosa"},
  {sepalLength: 5.4, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.8, sepalWidth: 3.4, petalLength: 1.6, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.8, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.1, species: "setosa"},
  {sepalLength: 4.3, sepalWidth: 3.0, petalLength: 1.1, petalWidth: 0.1, species: "setosa"},
  {sepalLength: 5.8, sepalWidth: 4.0, petalLength: 1.2, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.7, sepalWidth: 4.4, petalLength: 1.5, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 5.4, sepalWidth: 3.9, petalLength: 1.3, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.5, petalLength: 1.4, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 5.7, sepalWidth: 3.8, petalLength: 1.7, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.5, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 5.4, sepalWidth: 3.4, petalLength: 1.7, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 4.6, sepalWidth: 3.6, petalLength: 1.0, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.3, petalLength: 1.7, petalWidth: 0.5, species: "setosa"},
  {sepalLength: 4.8, sepalWidth: 3.4, petalLength: 1.9, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.0, petalLength: 1.6, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.4, petalLength: 1.6, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 5.2, sepalWidth: 3.5, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.2, sepalWidth: 3.4, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.7, sepalWidth: 3.2, petalLength: 1.6, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.8, sepalWidth: 3.1, petalLength: 1.6, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.4, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 5.2, sepalWidth: 4.1, petalLength: 1.5, petalWidth: 0.1, species: "setosa"},
  {sepalLength: 5.5, sepalWidth: 4.2, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.9, sepalWidth: 3.1, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.2, petalLength: 1.2, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.5, sepalWidth: 3.5, petalLength: 1.3, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.9, sepalWidth: 3.6, petalLength: 1.4, petalWidth: 0.1, species: "setosa"},
  {sepalLength: 4.4, sepalWidth: 3.0, petalLength: 1.3, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.4, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.5, petalLength: 1.3, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 4.5, sepalWidth: 2.3, petalLength: 1.3, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 4.4, sepalWidth: 3.2, petalLength: 1.3, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.5, petalLength: 1.6, petalWidth: 0.6, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.9, petalWidth: 0.4, species: "setosa"},
  {sepalLength: 4.8, sepalWidth: 3.0, petalLength: 1.4, petalWidth: 0.3, species: "setosa"},
  {sepalLength: 5.1, sepalWidth: 3.8, petalLength: 1.6, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 4.6, sepalWidth: 3.2, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.3, sepalWidth: 3.7, petalLength: 1.5, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 5.0, sepalWidth: 3.3, petalLength: 1.4, petalWidth: 0.2, species: "setosa"},
  {sepalLength: 7.0, sepalWidth: 3.2, petalLength: 4.7, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 6.4, sepalWidth: 3.2, petalLength: 4.5, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 6.9, sepalWidth: 3.1, petalLength: 4.9, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 5.5, sepalWidth: 2.3, petalLength: 4.0, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.5, sepalWidth: 2.8, petalLength: 4.6, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 5.7, sepalWidth: 2.8, petalLength: 4.5, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.3, sepalWidth: 3.3, petalLength: 4.7, petalWidth: 1.6, species: "versicolor"},
  {sepalLength: 4.9, sepalWidth: 2.4, petalLength: 3.3, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 6.6, sepalWidth: 2.9, petalLength: 4.6, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.2, sepalWidth: 2.7, petalLength: 3.9, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 5.0, sepalWidth: 2.0, petalLength: 3.5, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 5.9, sepalWidth: 3.0, petalLength: 4.2, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 6.0, sepalWidth: 2.2, petalLength: 4.0, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 6.1, sepalWidth: 2.9, petalLength: 4.7, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 5.6, sepalWidth: 2.9, petalLength: 3.6, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.7, sepalWidth: 3.1, petalLength: 4.4, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 5.6, sepalWidth: 3.0, petalLength: 4.5, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 5.8, sepalWidth: 2.7, petalLength: 4.1, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 6.2, sepalWidth: 2.2, petalLength: 4.5, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 5.6, sepalWidth: 2.5, petalLength: 3.9, petalWidth: 1.1, species: "versicolor"},
  {sepalLength: 5.9, sepalWidth: 3.2, petalLength: 4.8, petalWidth: 1.8, species: "versicolor"},
  {sepalLength: 6.1, sepalWidth: 2.8, petalLength: 4.0, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.3, sepalWidth: 2.5, petalLength: 4.9, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 6.1, sepalWidth: 2.8, petalLength: 4.7, petalWidth: 1.2, species: "versicolor"},
  {sepalLength: 6.4, sepalWidth: 2.9, petalLength: 4.3, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.6, sepalWidth: 3.0, petalLength: 4.4, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 6.8, sepalWidth: 2.8, petalLength: 4.8, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 6.7, sepalWidth: 3.0, petalLength: 5.0, petalWidth: 1.7, species: "versicolor"},
  {sepalLength: 6.0, sepalWidth: 2.9, petalLength: 4.5, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 5.7, sepalWidth: 2.6, petalLength: 3.5, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 5.5, sepalWidth: 2.4, petalLength: 3.8, petalWidth: 1.1, species: "versicolor"},
  {sepalLength: 5.5, sepalWidth: 2.4, petalLength: 3.7, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 5.8, sepalWidth: 2.7, petalLength: 3.9, petalWidth: 1.2, species: "versicolor"},
  {sepalLength: 6.0, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.6, species: "versicolor"},
  {sepalLength: 5.4, sepalWidth: 3.0, petalLength: 4.5, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 6.0, sepalWidth: 3.4, petalLength: 4.5, petalWidth: 1.6, species: "versicolor"},
  {sepalLength: 6.7, sepalWidth: 3.1, petalLength: 4.7, petalWidth: 1.5, species: "versicolor"},
  {sepalLength: 6.3, sepalWidth: 2.3, petalLength: 4.4, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.6, sepalWidth: 3.0, petalLength: 4.1, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.5, sepalWidth: 2.5, petalLength: 4.0, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.5, sepalWidth: 2.6, petalLength: 4.4, petalWidth: 1.2, species: "versicolor"},
  {sepalLength: 6.1, sepalWidth: 3.0, petalLength: 4.6, petalWidth: 1.4, species: "versicolor"},
  {sepalLength: 5.8, sepalWidth: 2.6, petalLength: 4.0, petalWidth: 1.2, species: "versicolor"},
  {sepalLength: 5.0, sepalWidth: 2.3, petalLength: 3.3, petalWidth: 1.0, species: "versicolor"},
  {sepalLength: 5.6, sepalWidth: 2.7, petalLength: 4.2, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.7, sepalWidth: 3.0, petalLength: 4.2, petalWidth: 1.2, species: "versicolor"},
  {sepalLength: 5.7, sepalWidth: 2.9, petalLength: 4.2, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.2, sepalWidth: 2.9, petalLength: 4.3, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 5.1, sepalWidth: 2.5, petalLength: 3.0, petalWidth: 1.1, species: "versicolor"},
  {sepalLength: 5.7, sepalWidth: 2.8, petalLength: 4.1, petalWidth: 1.3, species: "versicolor"},
  {sepalLength: 6.3, sepalWidth: 3.3, petalLength: 6.0, petalWidth: 2.5, species: "virginica"},
  {sepalLength: 5.8, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.9, species: "virginica"},
  {sepalLength: 7.1, sepalWidth: 3.0, petalLength: 5.9, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 6.3, sepalWidth: 2.9, petalLength: 5.6, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.8, petalWidth: 2.2, species: "virginica"},
  {sepalLength: 7.6, sepalWidth: 3.0, petalLength: 6.6, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 4.9, sepalWidth: 2.5, petalLength: 4.5, petalWidth: 1.7, species: "virginica"},
  {sepalLength: 7.3, sepalWidth: 2.9, petalLength: 6.3, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.7, sepalWidth: 2.5, petalLength: 5.8, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 7.2, sepalWidth: 3.6, petalLength: 6.1, petalWidth: 2.5, species: "virginica"},
  {sepalLength: 6.5, sepalWidth: 3.2, petalLength: 5.1, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 6.4, sepalWidth: 2.7, petalLength: 5.3, petalWidth: 1.9, species: "virginica"},
  {sepalLength: 6.8, sepalWidth: 3.0, petalLength: 5.5, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 5.7, sepalWidth: 2.5, petalLength: 5.0, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 5.8, sepalWidth: 2.8, petalLength: 5.1, petalWidth: 2.4, species: "virginica"},
  {sepalLength: 6.4, sepalWidth: 3.2, petalLength: 5.3, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.5, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 7.7, sepalWidth: 3.8, petalLength: 6.7, petalWidth: 2.2, species: "virginica"},
  {sepalLength: 7.7, sepalWidth: 2.6, petalLength: 6.9, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 6.0, sepalWidth: 2.2, petalLength: 5.0, petalWidth: 1.5, species: "virginica"},
  {sepalLength: 6.9, sepalWidth: 3.2, petalLength: 5.7, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 5.6, sepalWidth: 2.8, petalLength: 4.9, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 7.7, sepalWidth: 2.8, petalLength: 6.7, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 6.3, sepalWidth: 2.7, petalLength: 4.9, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.7, sepalWidth: 3.3, petalLength: 5.7, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 7.2, sepalWidth: 3.2, petalLength: 6.0, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.2, sepalWidth: 2.8, petalLength: 4.8, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.1, sepalWidth: 3.0, petalLength: 4.9, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.4, sepalWidth: 2.8, petalLength: 5.6, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 7.2, sepalWidth: 3.0, petalLength: 5.8, petalWidth: 1.6, species: "virginica"},
  {sepalLength: 7.4, sepalWidth: 2.8, petalLength: 6.1, petalWidth: 1.9, species: "virginica"},
  {sepalLength: 7.9, sepalWidth: 3.8, petalLength: 6.4, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 6.4, sepalWidth: 2.8, petalLength: 5.6, petalWidth: 2.2, species: "virginica"},
  {sepalLength: 6.3, sepalWidth: 2.8, petalLength: 5.1, petalWidth: 1.5, species: "virginica"},
  {sepalLength: 6.1, sepalWidth: 2.6, petalLength: 5.6, petalWidth: 1.4, species: "virginica"},
  {sepalLength: 7.7, sepalWidth: 3.0, petalLength: 6.1, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 6.3, sepalWidth: 3.4, petalLength: 5.6, petalWidth: 2.4, species: "virginica"},
  {sepalLength: 6.4, sepalWidth: 3.1, petalLength: 5.5, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.0, sepalWidth: 3.0, petalLength: 4.8, petalWidth: 1.8, species: "virginica"},
  {sepalLength: 6.9, sepalWidth: 3.1, petalLength: 5.4, petalWidth: 2.1, species: "virginica"},
  {sepalLength: 6.7, sepalWidth: 3.1, petalLength: 5.6, petalWidth: 2.4, species: "virginica"},
  {sepalLength: 6.9, sepalWidth: 3.1, petalLength: 5.1, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 5.8, sepalWidth: 2.7, petalLength: 5.1, petalWidth: 1.9, species: "virginica"},
  {sepalLength: 6.8, sepalWidth: 3.2, petalLength: 5.9, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 6.7, sepalWidth: 3.3, petalLength: 5.7, petalWidth: 2.5, species: "virginica"},
  {sepalLength: 6.7, sepalWidth: 3.0, petalLength: 5.2, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 6.3, sepalWidth: 2.5, petalLength: 5.0, petalWidth: 1.9, species: "virginica"},
  {sepalLength: 6.5, sepalWidth: 3.0, petalLength: 5.2, petalWidth: 2.0, species: "virginica"},
  {sepalLength: 6.2, sepalWidth: 3.4, petalLength: 5.4, petalWidth: 2.3, species: "virginica"},
  {sepalLength: 5.9, sepalWidth: 3.0, petalLength: 5.1, petalWidth: 1.8, species: "virginica"}
];
Copyright 2010 Stanford Visualization Group