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>