README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    The scatterplot matrix visualizations pairwise correlations for multi-dimensional data; each cell in the matrix is a scatterplot. This example uses Anderson's data of iris flowers on the Gaspé Peninsula. Scatterplot matrix design invented by J. A. Hartigan; see also R and GGobi. Data on Iris flowers collected by Edgar Anderson and published by Ronald Fisher.

  

  

## flowers1.csv

        
        sepal length
        sepal width
        petal length
        petal width
        species

        
        15.1
        3.5
        1.4
        0.2
        setosa

        
        14.9
        3.0
        1.4
        0.2
        setosa

        
        14.7
        3.2
        1.3
        0.2
        setosa

        
        14.6
        3.1
        1.5
        0.2
        setosa

        
        15.0
        3.6
        1.4
        0.2
        setosa

        
        15.4
        3.9
        1.7
        0.4
        setosa

        
        14.6
        3.4
        1.4
        0.3
        setosa

        
        15.0
        3.4
        1.5
        0.2
        setosa

        
        14.4
        2.9
        1.4
        0.2
        setosa

        
        14.9
        3.1
        1.5
        0.1
        setosa

        
        15.4
        3.7
        1.5
        0.2
        setosa

        
        14.8
        3.4
        1.6
        0.2
        setosa

        
        14.8
        3.0
        1.4
        0.1
        setosa

        
        14.3
        3.0
        1.1
        0.1
        setosa

        
        15.8
        4.0
        1.2
        0.2
        setosa

        
        15.7
        4.4
        1.5
        0.4
        setosa

        
        15.4
        3.9
        1.3
        0.4
        setosa

        
        15.1
        3.5
        1.4
        0.3
        setosa

        
        15.7
        3.8
        1.7
        0.3
        setosa

        
        15.1
        3.8
        1.5
        0.3
        setosa

        
        15.4
        3.4
        1.7
        0.2
        setosa

        
        15.1
        3.7
        1.5
        0.4
        setosa

        
        14.6
        3.6
        1.0
        0.2
        setosa

        
        15.1
        3.3
        1.7
        0.5
        setosa

        
        14.8
        3.4
        1.9
        0.2
        setosa

        
        15.0
        3.0
        1.6
        0.2
        setosa

        
        15.0
        3.4
        1.6
        0.4
        setosa

        
        15.2
        3.5
        1.5
        0.2
        setosa

        
        15.2
        3.4
        1.4
        0.2
        setosa

        
        14.7
        3.2
        1.6
        0.2
        setosa

        
        14.8
        3.1
        1.6
        0.2
        setosa

        
        15.4
        3.4
        1.5
        0.4
        setosa

        
        15.2
        4.1
        1.5
        0.1
        setosa

        
        15.5
        4.2
        1.4
        0.2
        setosa

        
        14.9
        3.1
        1.5
        0.2
        setosa

        
        15.0
        3.2
        1.2
        0.2
        setosa

        
        15.5
        3.5
        1.3
        0.2
        setosa

        
        14.9
        3.6
        1.4
        0.1
        setosa

        
        14.4
        3.0
        1.3
        0.2
        setosa

        
        15.1
        3.4
        1.5
        0.2
        setosa

        
        15.0
        3.5
        1.3
        0.3
        setosa

        
        14.5
        2.3
        1.3
        0.3
        setosa

        
        14.4
        3.2
        1.3
        0.2
        setosa

        
        15.0
        3.5
        1.6
        0.6
        setosa

        
        15.1
        3.8
        1.9
        0.4
        setosa

        
        14.8
        3.0
        1.4
        0.3
        setosa

        
        15.1
        3.8
        1.6
        0.2
        setosa

        
        14.6
        3.2
        1.4
        0.2
        setosa

        
        15.3
        3.7
        1.5
        0.2
        setosa

        
        15.0
        3.3
        1.4
        0.2
        setosa

        
        17.0
        3.2
        4.7
        1.4
        versicolor

        
        16.4
        3.2
        4.5
        1.5
        versicolor

        
        16.9
        3.1
        4.9
        1.5
        versicolor

        
        15.5
        2.3
        4.0
        1.3
        versicolor

        
        16.5
        2.8
        4.6
        1.5
        versicolor

        
        15.7
        2.8
        4.5
        1.3
        versicolor

        
        16.3
        3.3
        4.7
        1.6
        versicolor

        
        14.9
        2.4
        3.3
        1.0
        versicolor

        
        16.6
        2.9
        4.6
        1.3
        versicolor

        
        15.2
        2.7
        3.9
        1.4
        versicolor

        
        15.0
        2.0
        3.5
        1.0
        versicolor

        
        15.9
        3.0
        4.2
        1.5
        versicolor

        
        16.0
        2.2
        4.0
        1.0
        versicolor

        
        16.1
        2.9
        4.7
        1.4
        versicolor

        
        15.6
        2.9
        3.6
        1.3
        versicolor

        
        16.7
        3.1
        4.4
        1.4
        versicolor

        
        15.6
        3.0
        4.5
        1.5
        versicolor

        
        15.8
        2.7
        4.1
        1.0
        versicolor

        
        16.2
        2.2
        4.5
        1.5
        versicolor

        
        15.6
        2.5
        3.9
        1.1
        versicolor

        
        15.9
        3.2
        4.8
        1.8
        versicolor

        
        16.1
        2.8
        4.0
        1.3
        versicolor

        
        16.3
        2.5
        4.9
        1.5
        versicolor

        
        16.1
        2.8
        4.7
        1.2
        versicolor

        
        16.4
        2.9
        4.3
        1.3
        versicolor

        
        16.6
        3.0
        4.4
        1.4
        versicolor

        
        16.8
        2.8
        4.8
        1.4
        versicolor

        
        16.7
        3.0
        5.0
        1.7
        versicolor

        
        16.0
        2.9
        4.5
        1.5
        versicolor

        
        15.7
        2.6
        3.5
        1.0
        versicolor

        
        15.5
        2.4
        3.8
        1.1
        versicolor

        
        15.5
        2.4
        3.7
        1.0
        versicolor

        
        15.8
        2.7
        3.9
        1.2
        versicolor

        
        16.0
        2.7
        5.1
        1.6
        versicolor

        
        15.4
        3.0
        4.5
        1.5
        versicolor

        
        16.0
        3.4
        4.5
        1.6
        versicolor

        
        16.7
        3.1
        4.7
        1.5
        versicolor

        
        16.3
        2.3
        4.4
        1.3
        versicolor

        
        15.6
        3.0
        4.1
        1.3
        versicolor

        
        15.5
        2.5
        4.0
        1.3
        versicolor

        
        15.5
        2.6
        4.4
        1.2
        versicolor

        
        16.1
        3.0
        4.6
        1.4
        versicolor

        
        15.8
        2.6
        4.0
        1.2
        versicolor

        
        15.0
        2.3
        3.3
        1.0
        versicolor

        
        15.6
        2.7
        4.2
        1.3
        versicolor

        
        15.7
        3.0
        4.2
        1.2
        versicolor

        
        15.7
        2.9
        4.2
        1.3
        versicolor

        
        16.2
        2.9
        4.3
        1.3
        versicolor

        
        15.1
        2.5
        3.0
        1.1
        versicolor

        
        15.7
        2.8
        4.1
        1.3
        versicolor

        
        6.3
        3.3
        6.0
        2.5
        virginica

        
        5.8
        2.7
        5.1
        1.9
        virginica

        
        7.1
        3.0
        5.9
        2.1
        virginica

        
        6.3
        2.9
        5.6
        1.8
        virginica

        
        6.5
        3.0
        5.8
        2.2
        virginica

        
        7.6
        3.0
        6.6
        2.1
        virginica

        
        4.9
        2.5
        4.5
        1.7
        virginica

        
        7.3
        2.9
        6.3
        1.8
        virginica

        
        6.7
        2.5
        5.8
        1.8
        virginica

        
        7.2
        3.6
        6.1
        2.5
        virginica

        
        6.5
        3.2
        5.1
        2.0
        virginica

        
        6.4
        2.7
        5.3
        1.9
        virginica

        
        6.8
        3.0
        5.5
        2.1
        virginica

        
        5.7
        2.5
        5.0
        2.0
        virginica

        
        5.8
        2.8
        5.1
        2.4
        virginica

        
        6.4
        3.2
        5.3
        2.3
        virginica

        
        6.5
        3.0
        5.5
        1.8
        virginica

        
        7.7
        3.8
        6.7
        2.2
        virginica

        
        7.7
        2.6
        6.9
        2.3
        virginica

        
        6.0
        2.2
        5.0
        1.5
        virginica

        
        6.9
        3.2
        5.7
        2.3
        virginica

        
        5.6
        2.8
        4.9
        2.0
        virginica

        
        7.7
        2.8
        6.7
        2.0
        virginica

        
        6.3
        2.7
        4.9
        1.8
        virginica

        
        6.7
        3.3
        5.7
        2.1
        virginica

        
        7.2
        3.2
        6.0
        1.8
        virginica

        
        6.2
        2.8
        4.8
        1.8
        virginica

        
        6.1
        3.0
        4.9
        1.8
        virginica

        
        6.4
        2.8
        5.6
        2.1
        virginica

        
        7.2
        3.0
        5.8
        1.6
        virginica

        
        7.4
        2.8
        6.1
        1.9
        virginica

        
        7.9
        3.8
        6.4
        2.0
        virginica

        
        6.4
        2.8
        5.6
        2.2
        virginica

        
        6.3
        2.8
        5.1
        1.5
        virginica

        
        6.1
        2.6
        5.6
        1.4
        virginica

        
        6.3
        3.4
        5.6
        2.4
        virginica

        
        6.4
        3.1
        5.5
        1.8
        virginica

        
        6.0
        3.0
        4.8
        1.8
        virginica

        
        6.9
        3.1
        5.4
        2.1
        virginica

        
        6.7
        3.1
        5.6
        2.4
        virginica

        
        6.9
        3.1
        5.1
        2.3
        virginica

        
        5.8
        2.7
        5.1
        1.9
        virginica

        
        6.8
        3.2
        5.9
        2.3
        virginica

        
        6.7
        3.3
        5.7
        2.5
        virginica

        
        6.7
        3.0
        5.2
        2.3
        virginica

        
        6.3
        2.5
        5.0
        1.9
        virginica

        
        6.5
        3.0
        5.2
        2.0
        virginica

        
        6.2
        3.4
        5.4
        2.3
        virginica

        
        5.9
        3.0
        5.1
        1.8
        virginica

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
  padding: 10px;
}

.axis,
.frame {
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
}

.axis path {
  display: none;
}

.frame {
  fill: none;
  stroke: #aaa;
}

circle {
  fill-opacity: .7;
}

circle.hidden {
  fill: #ccc !important;
}

.extent {
  fill: #000;
  fill-opacity: .125;
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    size = 150,
    padding = 19.5;

var x = d3.scale.linear()
    .range([padding / 2, size - padding / 2]);

var y = d3.scale.linear()
    .range([size - padding / 2, padding / 2]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5);

var color = d3.scale.category10();

d3.csv("flowers1.csv", function(error, data) {
  var domainByTrait = {},
      traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }),
      n = traits.length;

  traits.forEach(function(trait) {
    domainByTrait[trait] = d3.extent(data, function(d) { return +d[trait]; });

  });

  xAxis.tickSize(size * n);
  yAxis.tickSize(-size * n);

  var brush = d3.svg.brush()
      .x(x)
      .y(y)
      .on("brushstart", brushstart)
      .on("brush", brushmove)
      .on("brushend", brushend);

  var svg = d3.select("body").append("svg")
      .attr("width", size * n + padding)
      .attr("height", size * n + padding)
    .append("g")
      .attr("transform", "translate(" + padding + "," + padding / 2 + ")");

  svg.selectAll(".x.axis")
      .data(traits)
    .enter().append("g")
      .attr("class", "x axis")
      .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
      .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });

  svg.selectAll(".y.axis")
      .data(traits)
    .enter().append("g")
      .attr("class", "y axis")
      .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; })
      .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); });

  var cell = svg.selectAll(".cell")
      .data(cross(traits, traits))
    .enter().append("g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })
      .each(plot);

  // Titles for the diagonal.
  cell.filter(function(d) { return d.i === d.j; }).append("text")
      .attr("x", padding)
      .attr("y", padding)
      .attr("dy", ".71em")
      .text(function(d) { return d.x; });

  cell.call(brush);

  function plot(p) {
    var cell = d3.select(this);

    x.domain(domainByTrait[p.x]);
    y.domain(domainByTrait[p.y]);

    cell.append("rect")
        .attr("class", "frame")
        .attr("x", padding / 2)
        .attr("y", padding / 2)
        .attr("width", size - padding)
        .attr("height", size - padding);

    cell.selectAll("circle")
        .data(data)
      .enter().append("circle")
        .attr("cx", function(d) { return x(d[p.x]); })
        .attr("cy", function(d) { return y(d[p.y]); })
        .attr("r", 3)
        .style("fill", function(d) { return color(d.species); });
  }

  var brushCell;

  // Clear the previously-active brush, if any.
  function brushstart(p) {
    if (brushCell !== this) {
      d3.select(brushCell).call(brush.clear());
      x.domain(domainByTrait[p.x]);
      y.domain(domainByTrait[p.y]);
      brushCell = this;
    }
  }

  // Highlight the selected circles.
  function brushmove(p) {
    var e = brush.extent();
    svg.selectAll("circle").classed("hidden", function(d) {
      return e[0][0] > d[p.x] || d[p.x] > e[1][0]
          || e[0][1] > d[p.y] || d[p.y] > e[1][1];
    });
  }

  // If the brush is empty, select all circles.
  function brushend() {
    if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
  }

  function cross(a, b) {
    var c = [], n = a.length, m = b.length, i, j;
    for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j});
    return c;
  }

  d3.select(self.frameElement).style("height", size * n + padding + 20 + "px");
});

</script>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png