D3 Examples - Scatterplot Matrix Brushing

Scatterplot Matrix Brushing

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script>
​
var width = 960,
    size = 100,
    padding = 20;
​
var x = d3.scaleLinear()
    .range([padding / 2, size - padding / 2])
.domain([0,10]);
​
var y = d3.scaleLinear()
    .range([size - padding / 2, padding / 2])
.domain([0,10]);
​
var color = d3.scaleOrdinal(d3.schemeCategory20);
​
//d3.csv("flowers.csv", function(error, data) {
d3.json("data.json", function(error, data) {
  if (error) throw error;
​
  var domainByTrait = {},
      traits = d3.keys(data[0]).filter(function(d) { return d !== "name"; }),
      n = traits.length;
    
  traits.forEach(function(trait) {
    domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; });
  });
    var value=size*n;
 var xAxis = d3.axisBottom(x)
                        .tickSize(value);
​
    var yAxis = d3.axisLeft(y).tickSize(-size * n);
​
  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([0,10]); 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([0,10]); 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; });
​
  svg.selectAll(".axis line")
  .attr("stroke","#ddd");
  
  svg.selectAll(".axis path")
  .attr("display","none");
  
  function plot(p) {
    console.log(this);
    var cell = d3.select(this);
​
    cell.append("rect")
        .attr("class", "frame")
        .attr("x", padding / 2)
        .attr("y", padding / 2)
        .attr("width", size - padding)
        .attr("height", size - padding)
            .attr("fill","none")
            .attr("stroke","#aaa");
​
    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", 4)
        .style("fill", function(d) { return color(d.name); });
  }
});
​
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;
}
​
</script>
​
    