Correlation Matrix II by micahstubbs

This example adds labels for the index, row, and column of the scatterplot matrix to help reason about the grid layout. I wanted this example to maintain the color-by-diagonal pattern. After labeling the grid cells and some experimentation, I realized that

var row = Math.floor(i % rows);
var col = Math.floor(i / rows);
colors(row + col)

would generate the pattern I was looking for.

When a measure intersects with itself, this example shows the name of that measure in the style of the pairs plot implemented in the R package ggplot2.

Forked from Correlation Matrix I by micahstubbs

Originally inspired by the Simple Correlation Matrix block from emeeks

index.html


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Correlation Matrix II</title>
<style>
text {
  font-family: Roboto;
  font-weight: 400;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script>

//These attributes could be derived from the data
attributes = ["carat","depth","table","price","x","y","z"];
attributeMatrix = [];

attributes.forEach(function (a, x) {
  attributes.forEach(function (b, y) {
    //create an n-by-n matrix based on pairs of attributes
    attributeMatrix.push({a: a, b: b, x: x, y: y})
  })
})

colors = d3.scale.ordinal()
  .range(["#827abf", "#f62150", "#6f89b6", "#f5e0b7", "#5b1e37", "#b9e3c5"]);

d3.select("body")
  .append("svg")
  .attr("height", 1140)
  .attr("width", 1140)

d3.json("diamonds.json", small_scatterplots);

function small_scatterplots(data) {

  console.log("data", data);

  //format data as numbers
  data.forEach(function (d) {
    attributes.forEach(function (att) {
      d[att] = Number(d[att])
    })
  })

  //create scales dynamically for each attribute's extent

  scale = {};
  attributes.forEach(function (att) {
    scale[att] = d3.scale.linear();
    attExtent = d3.extent(data, function (d) {return d[att]});
    scale[att].domain(attExtent).range([5,95]);
  })

  var height = 100;
  var width = 100;
  var padding = 7;

  var rows = attributes.length;
  var columns = rows;
  console.log('rows', rows);

  //bind the matrix array to a grid of g elements
  d3.select("svg")
    .selectAll("g")
    .data(attributeMatrix)
    .enter()
    .append("g")
    .attr("transform", function (d) {
      return "translate(" + 
        ((d.x * (width + padding)) + padding) + "," + 
        ((d.y * (height + padding)) + padding) + 
        ")" 
    });

  d3.selectAll("g")
    .each(function (matrix, i) {
      //index i is only used for coloring
      var row = Math.floor(i % rows);
      var col = Math.floor(i / rows);
  
      //background/border
      d3.select(this).append("rect")
        .style("fill", "white")
        .style("stroke", "gray")
        .style("stroke-width", 1)
        .attr("height", height)
        .attr("width", width);
        
      // if we are comparing an attribute with itself
      if (matrix.a === matrix.b) {
  
        // show a label
        d3.select(this)
          .append("text")
          .attr("x", 50)
          .style("text-anchor", "middle")
          .attr("y", 50)
          .text(matrix.a)
  
      } else {

      // if not, draw
      // scatterplot points
      d3.select(this).selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("r", 2)
        .style("fill", colors(row + col))
        .attr("cx", function (d) {return scale[matrix.a](d[matrix.a])})
        .attr("cy", function (d) {return 100 - scale[matrix.b](d[matrix.b])})

      // show a label for the index 
      d3.select(this)
        .append("text")
        .attr("x", 5)
        .style("text-anchor", "start")
        .attr("y", 15)
        .text("i=" + i) 

      // show a label for the (row,col) pair
      d3.select(this)
        .append("text")
        .attr("x", width - 5)
        .style("text-anchor", "end")
        .attr("y", height - 8)
        .text("(" + row + ", " + col + ")") 

    }

  })


}

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