| license: gpl-3.0 | |
| border: no | |
| height: 960 |
The scatterplot matrix visualizations pairwise correlations for multi-dimensional data; each cell in the matrix is a scatterplot. This example uses Anderson's data of iris flowers on the Gaspé Peninsula. Scatterplot matrix design invented by J. A. Hartigan; see also R and GGobi. Data on Iris flowers collected by Edgar Anderson and published by Ronald Fisher.
See also this version with brushing.
forked from mbostock's block: Scatterplot Matrix
| r | g | b | label | |
|---|---|---|---|---|
| 27 | 158 | 119 | Teal | |
| 102 | 194 | 165 | Teal | |
| 179 | 226 | 205 | Teal | |
| 217 | 95 | 2 | Orange | |
| 252 | 141 | 98 | Orange | |
| 253 | 205 | 172 | Orange | |
| 117 | 112 | 179 | Purple | |
| 141 | 160 | 203 | Purple | |
| 203 | 213 | 232 | Purple | |
| 231 | 41 | 138 | Pink | |
| 231 | 138 | 195 | Pink | |
| 244 | 202 | 228 | Pink | |
| 102 | 166 | 30 | Green | |
| 166 | 216 | 84 | Green | |
| 230 | 245 | 201 | Green | |
| 230 | 171 | 2 | Yellow | |
| 255 | 217 | 47 | Yellow | |
| 255 | 242 | 174 | Yellow | |
| 166 | 118 | 29 | Brown | |
| 229 | 196 | 148 | Brown | |
| 241 | 226 | 204 | Brown | |
| 102 | 102 | 102 | Grey | |
| 179 | 179 | 179 | Grey | |
| 204 | 204 | 204 | Grey |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| padding: 10px; | |
| } | |
| .axis, | |
| .frame { | |
| shape-rendering: crispEdges; | |
| } | |
| .axis line { | |
| stroke: #ddd; | |
| } | |
| .axis path { | |
| display: none; | |
| } | |
| .cell text { | |
| font-weight: bold; | |
| text-transform: capitalize; | |
| } | |
| .frame { | |
| fill: none; | |
| stroke: #aaa; | |
| } | |
| circle { | |
| fill-opacity: .7; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| size = 230, | |
| padding = 20; | |
| var x = d3.scale.linear() | |
| .range([padding / 2, size - padding / 2]); | |
| var y = d3.scale.linear() | |
| .range([size - padding / 2, padding / 2]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(6); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(6); | |
| //var color = d3.scale.category10(); | |
| d3.csv("colorbrewerCategorical8.csv", function(error, data) { | |
| if (error) throw error; | |
| var domainByChannel = {}, | |
| channels = d3.keys(data[0]).filter(function(d) { return d !== "label"; }), | |
| n = channels.length; | |
| channels.forEach(function(channel) { | |
| //domainByChannel[channel] = d3.extent(data, function(d) { return d[channel]; }); | |
| domainByChannel[channel] = [0, 255]; | |
| }); | |
| xAxis.tickSize(size * n); | |
| yAxis.tickSize(-size * n); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", size * n + padding) | |
| .attr("height", size * n + padding) | |
| .append("g") | |
| .attr("transform", "translate(" + padding + "," + padding / 2 + ")"); | |
| svg.selectAll(".x.axis") | |
| .data(channels) | |
| .enter().append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) | |
| .each(function(d) { x.domain(domainByChannel[d]); d3.select(this).call(xAxis); }); | |
| svg.selectAll(".y.axis") | |
| .data(channels) | |
| .enter().append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) | |
| .each(function(d) { y.domain(domainByChannel[d]); d3.select(this).call(yAxis); }); | |
| var cell = svg.selectAll(".cell") | |
| .data(cross(channels, channels)) | |
| .enter().append("g") | |
| .attr("class", "cell") | |
| .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) | |
| .each(plot); | |
| // Titles for the diagonal. | |
| cell.filter(function(d) { return d.i === d.j; }).append("text") | |
| .attr("x", padding) | |
| .attr("y", padding) | |
| .attr("dy", ".71em") | |
| .text(function(d) { return d.x; }); | |
| function plot(p) { | |
| var cell = d3.select(this); | |
| x.domain(domainByChannel[p.x]); | |
| y.domain(domainByChannel[p.y]); | |
| cell.append("rect") | |
| .attr("class", "frame") | |
| .attr("x", padding / 2) | |
| .attr("y", padding / 2) | |
| .attr("width", size - padding) | |
| .attr("height", size - padding); | |
| cell.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("cx", function(d) { return x(d[p.x]); }) | |
| .attr("cy", function(d) { return y(d[p.y]); }) | |
| .attr("r", 4) | |
| .style("fill", function(d) { return `rgb(${d.r},${d.g},${d.b})`; }); | |
| } | |
| }); | |
| function cross(a, b) { | |
| var c = [], n = a.length, m = b.length, i, j; | |
| for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); | |
| return c; | |
| } | |
| </script> |