Correlation Matrix I

A very simple example of how to create a correlation matrix of scatterplots with dynamic scales. This iteration adds 20px spacing between matrix cells and places the cell titles above the cells.

Forked from the Simple Correlation Matrix bl.ock by emeeks

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Correlation Matrix</title>
<style>
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  opacity: 0.4;
  marker-end: url(#end-arrow);
}

</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.csv("diamonds.csv", small_scatterplots);

function small_scatterplots(data) {

console.log("data", data);

//d3.csv pulls in data as strings so they need to be formatted as numbers
  data.forEach(function (d) {
    attributes.forEach(function (att) {
      d[att] = parseFloat(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]);
  })

//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 * 120) + 20) + "," + ((d.y * 120) + 20) + ")" });

d3.selectAll("g")
  .each(function (matrix, i) {
    //index i is only used for coloring

//background/border
    d3.select(this).append("rect").style("fill", "white").style("stroke", "black").style("stroke-width", 1)
    .attr("height", 100)
    .attr("width", 100);

//label
    d3.select(this).append("text")
    .attr("x", 50)
    .style("text-anchor", "middle")
    .attr("y", -5)
    .text(matrix.a + " - " + matrix.b);

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

}

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

https://d3js.org/d3.v3.min.js