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