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
xxxxxxxxxx
<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>
https://d3js.org/d3.v3.min.js