|
|
|
<!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> |