Skip to content

Instantly share code, notes, and snippets.

@anaeliaovalle
Last active February 27, 2017 08:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anaeliaovalle/a735a244633fd9fd391d1de18573a2fc to your computer and use it in GitHub Desktop.
Save anaeliaovalle/a735a244633fd9fd391d1de18573a2fc to your computer and use it in GitHub Desktop.
Scatterplot Matrix
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

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px avenir;
padding: 10px;
margin-top: 15px;
margin-bottom:15px;
margin-right:50px;
margin-left:50px;
}
.axis,
.frame {
shape-rendering: crispEdges;
}
.axis line {
stroke: #ddd;
}
.axis path {
display: none;
}
.cell text {
font-weight: bold;
text-transform: capitalize;
font-size: 10px;
}
.frame {
fill: none;
}
circle {
fill-opacity: .7;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var radius = 2;
var width = 800,
size = 110,
padding = 15;
var hidden = [7,14,15,21,22,23,28,29,30,31,35,36,37,38,39,42,43,44,45,46,47];
var tiers = ["Highly Selective", "Selective", "Non Selective", "Other (Two-year)"];
var x = d3.scale.linear()
.range([padding / 2, size - padding / 2]);
var y = d3.scale.linear()
.range([size - padding / 2, padding / 2]);
var formatxAxis = d3.format('.0f');
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
.tickFormat(function (d) {
if ((d / 1000) >= 1) {
d = d / 1000 + "K";
return d;
}
else if (d < 1){
return formatxAxis(d*100)+"%";
}
});
var yAxis = d3.svg.axis()
.scale(y)
.orient("right")
.ticks(4)
.tickFormat(function (d) {
if ((d / 1000) >= 1) {
d = d / 1000 + "K";
return d;
}
else if (d < 1){
return formatxAxis(d*100)+"%";
}
});
var color_range = ["#1f77b4", "#ff7f0e" , "#2ca02c", "#d62728"]
var color = d3.scale.ordinal()
.range(color_range);
function toNumber(text) {
text = text.trim();
text = text.replace(/,/, "");
return +text;
}
d3.csv("scatter.csv",
function(d) {
return {
childRank:+d.k_rank,
parentQuartile5: +d.par_q5,
parentQuartile4:+d.par_q4,
parentQuartile3: +d.par_q3,
parentQuartile2: +d.par_q2,
parentQuartile1: +d.par_q1,
childMedianInc: +d.k_median,
tiername: d.tiername
};
},
function(error, data) {
if (error) throw error;
/*
* converts strings (with extra spaces and comma thousands
* separators) to a number
*/
if (error) throw error;
var domainByTrait = {},
traits = d3.keys(data[0]).filter(function(d) { return d !== "tiername"; }),
n = traits.length;
traits.forEach(function(trait) {
domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; });
});
// xAxis.tickSize(size);
// yAxis.tickSize(-size * n);
var svg = d3.select("body").append("svg")
.attr("width", size * n + padding+120)
.attr("height", size * n + padding+100)
.append("g")
.attr("transform", "translate(" + padding + "," + padding/.5 + ")");
svg.append("text")
.attr("x", 0)
.attr("y", 120 )
.attr("text-anchor", "start")
.style("font-size", "40px")
.text("Child Rank Relative to")
// .style('fill', 'darkOrange');
svg.append("text")
.attr("x", 0)
.attr("y", 120 )
.attr("dy", "1.2em" )
.attr("text-anchor", "start")
.style("font-size", "50px")
.text("Parent Income Quartile")
.style('fill', 'darkOrange');
svg.append("text")
.attr("x", 0)
.attr("y", 120 )
.attr("dy", "3.5em" )
.attr("text-anchor", "start")
.style("font-size", "30px")
.text("for Universities in California")
// .style('fill', 'darkOrange');
svg.selectAll(".x.axis")
.data(traits)
.enter().append("g")
.attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ","+size*n+")"; })
.each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });
svg.selectAll(".y.axis")
.data(traits)
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d, i) { return "translate(770," + i * size + ")"; })
.each(function(d){
y.domain(domainByTrait[d]);
d3.select(this).call(yAxis)
});
var cell = svg.selectAll(".cell")
.data(cross(traits, traits))
.enter().append("g")
.attr("class", function(d,i){
// console.log("cell"+i);
return "cell"+i;
})
.attr("id", function(d,i){
// console.log("cell"+i);
return "cell"+i;
})
.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-5)
.attr("y", padding)
.attr("dy", ".71em")
.text(function(d) { return d.x; })
.style("font-weight", "bold");
hide();
var legend = svg.selectAll(".legend")
.data(color.domain()).enter()
.append("g")
.attr("class","legend")
.attr("transform", "translate(" + 0 + "," + 350+ ")");
legend.append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return 20 * i; })
.attr("width", 15)
.attr("height", 15)
.style("fill", function(d,i) { return color_range[i % color_range.length]})
// console.log(color.domain())
legend.append("text")
.attr("x", 30)
.attr("dy", "1em")
.attr("y", function(d, i) { return 20 * i; })
.text(function(d,i) { ; return tiers[i % tiers.length]})
.attr("font-size", "12px");
legend.append("text")
.attr("x",0)
.attr("dy", "-.2em")
.attr("y",-10)
.text("School Tier")
.attr("font-size", "17px");
function plot(p) {
var cell = d3.select(this);
x.domain(domainByTrait[p.x]);
y.domain(domainByTrait[p.y]);
hide(cell);
cell.append("rect")
.attr("class", "frame")
.attr("x", padding / 2)
.attr("y", padding / 2)
.attr("width", size - padding)
.attr("height", size - padding)
.attr('stroke', function(d){
//grab child rank with all others
if (cell.data()[0]['j'] == 0 & (cell.data()[0]['i'] == 1 || cell.data()[0]['i'] == 2 || cell.data()[0]['i'] == 3 || cell.data()[0]['i'] == 4 || cell.data()[0]['i'] == 5 || cell.data()[0]['i'] == 6)) {
// console.log("yes")
return 'grey';
}
//grab child median with all others
if (cell.data()[0]['i'] == 6 & (cell.data()[0]['j'] == 1 || cell.data()[0]['j'] == 2 || cell.data()[0]['j'] == 3 || cell.data()[0]['j'] == 4 || cell.data()[0]['j'] == 5 || cell.data()[0]['j'] == 6 )) {
// console.log("yes")
return 'grey';
}
//GET ACROSS DIAGONAL
//grab child rank with all others
if (cell.data()[0]['j'] == 6 & (cell.data()[0]['i'] == 1 || cell.data()[0]['i'] == 2 || cell.data()[0]['i'] == 3 || cell.data()[0]['i'] == 4 || cell.data()[0]['i'] == 5 || cell.data()[0]['i'] == 0)) {
// console.log("yes")
return 'grey';
}
//grab child median with all others
if (cell.data()[0]['i'] == 0 & (cell.data()[0]['j'] == 1 || cell.data()[0]['j'] == 2 || cell.data()[0]['j'] == 3 || cell.data()[0]['j'] == 4 || cell.data()[0]['j'] == 5 || cell.data()[0]['j'] == 0 )) {
return 'grey';
}
else{
return '#aaa';
}})
//CHANGE COLOR STROKE
.attr('stroke-width', function(d){
if (cell.data()[0]['j'] == 0 & (cell.data()[0]['i'] == 1 || cell.data()[0]['i'] == 2 || cell.data()[0]['i'] == 3 || cell.data()[0]['i'] == 4 || cell.data()[0]['i'] == 5 || cell.data()[0]['i'] == 6)) {
//
return '2.5px';
}
//grab child median with all others
if (cell.data()[0]['i'] == 6 & (cell.data()[0]['j'] == 1 || cell.data()[0]['j'] == 2 || cell.data()[0]['j'] == 3 || cell.data()[0]['j'] == 4 || cell.data()[0]['j'] == 5 || cell.data()[0]['j'] == 6 )) {
//
return '2.5px';
}
//GET ACROSS DIAGONAL
//grab child rank with all others
if (cell.data()[0]['j'] == 6 & (cell.data()[0]['i'] == 1 || cell.data()[0]['i'] == 2 || cell.data()[0]['i'] == 3 || cell.data()[0]['i'] == 4 || cell.data()[0]['i'] == 5 || cell.data()[0]['i'] == 0)) {
//
return '2.5px';
}
//grab child median with all others
if (cell.data()[0]['i'] == 0 & (cell.data()[0]['j'] == 1 || cell.data()[0]['j'] == 2 || cell.data()[0]['j'] == 3 || cell.data()[0]['j'] == 4 || cell.data()[0]['j'] == 5 || cell.data()[0]['j'] == 0 )) {
return '2.5px';
}
else{
return '1px';
}})
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", 1.2)
.style("fill", function(d) { return color(d.tiername); });
}
});
function cross(a, b) {
var c = [];
var n = a.length;
var m = b.length;
var i
var 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;
};
function hide(cell){
var num;
for (num = 0; num < 49 ; num++){
if (hidden.includes(num)){
d3.select("#cell"+num)
.remove();
}
}
};
</script>
k_median k_rank par_q1 par_q2 par_q3 par_q4 par_q5 tiername
83000 0.7741 0.0481 0.0814 0.1055 0.1969 0.5682 HighlySelective
47900 0.6433 0.0534 0.0884 0.1492 0.2119 0.4971 HighlySelective
69900 0.7457 0.0433 0.0604 0.0991 0.1686 0.6285 HighlySelective
82400 0.7896 0.0393 0.0632 0.1152 0.1700 0.6123 HighlySelective
49000 0.6497 0.0853 0.0984 0.1212 0.1747 0.5203 HighlySelective
55800 0.6731 0.0432 0.0795 0.1412 0.1805 0.5557 HighlySelective
43500 0.6144 0.0624 0.0871 0.0991 0.1615 0.5899 HighlySelective
62000 0.7208 0.0368 0.0654 0.0883 0.1283 0.6812 HighlySelective
72500 0.7501 0.0362 0.0608 0.1055 0.1467 0.6508 HighlySelective
46400 0.6129 0.0512 0.0736 0.1367 0.1739 0.5646 HighlySelective
67900 0.7355 0.0884 0.1061 0.1289 0.1631 0.5135 HighlySelective
60400 0.7058 0.1225 0.1323 0.1502 0.1906 0.4044 HighlySelective
65800 0.7238 0.1024 0.1251 0.1330 0.1619 0.4775 HighlySelective
65300 0.7295 0.0878 0.1086 0.1267 0.1764 0.5005 HighlySelective
58800 0.7021 0.0621 0.0871 0.1273 0.1727 0.5507 HighlySelective
61200 0.6909 0.0493 0.0809 0.1202 0.1617 0.5879 HighlySelective
63700 0.7111 0.0721 0.0980 0.1366 0.1601 0.5332 HighlySelective
47600 0.6271 0.0372 0.0527 0.1201 0.1907 0.5993 HighlySelective
42800 0.5567 0.1491 0.1303 0.1653 0.1488 0.4066 Nonselective
29700 0.5126 0.0778 0.1122 0.1907 0.2098 0.4095 Nonselective
25300 0.5121 0.0803 0.1131 0.1345 0.1864 0.4858 Nonselective
47300 0.6261 0.0507 0.1004 0.1806 0.2200 0.4483 Nonselective
31300 0.5029 0.1117 0.1464 0.1070 0.1626 0.4723 Nonselective
47600 0.5969 0.1067 0.1710 0.1838 0.1966 0.3419 Nonselective
42100 0.5981 0.0492 0.0891 0.1650 0.2227 0.4740 Selective
35700 0.5596 0.0693 0.0951 0.1722 0.2358 0.4276 Selective
36200 0.5597 0.0765 0.1119 0.2261 0.3191 0.2665 Selective
50900 0.6666 0.0321 0.0955 0.1444 0.2460 0.4820 Selective
85800 0.7906 0.0593 0.0725 0.1631 0.1991 0.5060 Selective
65500 0.7316 0.0420 0.0678 0.1118 0.2024 0.5760 Selective
55100 0.6879 0.1493 0.1541 0.1587 0.2094 0.3285 Selective
47900 0.6498 0.1045 0.1330 0.1669 0.2367 0.3589 Selective
46100 0.6258 0.1406 0.2016 0.1846 0.2054 0.2677 Selective
48700 0.6554 0.0609 0.0886 0.1308 0.2131 0.5066 Selective
40300 0.6008 0.2632 0.2439 0.2273 0.1494 0.1162 Selective
51300 0.6652 0.0989 0.1332 0.1810 0.2309 0.3560 Selective
44400 0.6268 0.1595 0.1723 0.1751 0.2083 0.2848 Selective
47800 0.6431 0.1212 0.1482 0.1659 0.2168 0.3479 Selective
48800 0.6521 0.1161 0.1487 0.1627 0.2092 0.3635 Selective
43000 0.6157 0.3312 0.2644 0.1899 0.1165 0.0981 Selective
41100 0.6047 0.1050 0.1324 0.1564 0.2085 0.3977 Selective
44100 0.6231 0.1979 0.1963 0.1854 0.1803 0.2401 Selective
43500 0.6159 0.1410 0.1831 0.1985 0.2363 0.2412 Selective
44400 0.6274 0.0900 0.1389 0.1545 0.2253 0.3912 Selective
44800 0.6184 0.1335 0.1736 0.1966 0.2512 0.2451 Selective
39600 0.5832 0.0541 0.1094 0.2143 0.2326 0.3897 Selective
45200 0.6386 0.0607 0.1291 0.1604 0.2396 0.4102 Selective
37900 0.5837 0.1007 0.1498 0.2656 0.2870 0.1969 Selective
35500 0.5571 0.0883 0.1159 0.1575 0.2274 0.4110 Selective
43200 0.6174 0.1119 0.1483 0.1877 0.2320 0.3200 Selective
56200 0.6872 0.0536 0.0958 0.1121 0.1594 0.5792 Selective
30700 0.5270 0.0471 0.1386 0.2062 0.2493 0.3589 Selective
40200 0.5987 0.1062 0.1479 0.2140 0.1947 0.3372 Selective
44900 0.6399 0.2124 0.2610 0.2124 0.1554 0.1588 Selective
50700 0.6437 0.0615 0.1168 0.1720 0.2273 0.4224 Selective
45900 0.6190 0.0330 0.0941 0.1520 0.2229 0.4980 Selective
55200 0.6906 0.0673 0.0945 0.1620 0.1887 0.4875 Selective
51000 0.6668 0.0898 0.1093 0.1517 0.2091 0.4402 Selective
45800 0.6305 0.1007 0.1449 0.1771 0.2185 0.3587 Selective
56500 0.6988 0.1166 0.1262 0.1578 0.2123 0.3871 Selective
27800 0.5129 0.0640 0.1790 0.2432 0.2845 0.2293 Selective
46400 0.6364 0.0502 0.0850 0.1321 0.2155 0.5172 Selective
61600 0.7215 0.0858 0.1051 0.1320 0.1893 0.4878 Selective
52800 0.6737 0.1467 0.1683 0.1744 0.1929 0.3177 Selective
46100 0.6339 0.0737 0.0934 0.1379 0.1733 0.5217 Selective
48600 0.6519 0.1208 0.1637 0.2181 0.2191 0.2782 Selective
47700 0.6443 0.0531 0.0966 0.1567 0.2268 0.4668 Selective
56900 0.6883 0.0586 0.1086 0.1511 0.2025 0.4792 Selective
59000 0.7061 0.0855 0.1258 0.1691 0.1869 0.4326 Selective
32900 0.5408 0.0618 0.1252 0.2324 0.2641 0.3165 Selective
47900 0.6300 0.0789 0.1166 0.1607 0.2168 0.4271 Selective
44300 0.6190 0.1869 0.2047 0.1936 0.2015 0.2133 Selective
30800 0.5157 0.1409 0.1891 0.2350 0.2569 0.1782 Two-year
25700 0.4914 0.1640 0.1747 0.2199 0.2628 0.1786 Two-year
28700 0.5101 0.1892 0.2127 0.2582 0.2336 0.1062 Two-year
27300 0.4979 0.1606 0.1916 0.2193 0.2324 0.1961 Two-year
26500 0.4945 0.1420 0.1866 0.1942 0.2026 0.2747 Two-year
30200 0.5162 0.2339 0.2643 0.2457 0.1657 0.0903 Two-year
35200 0.5553 0.0929 0.1416 0.1966 0.2466 0.3223 Two-year
27700 0.4974 0.1469 0.1885 0.2249 0.2418 0.1979 Two-year
28100 0.5045 0.1406 0.1888 0.2209 0.2407 0.2089 Two-year
30600 0.5203 0.1620 0.1614 0.1805 0.2091 0.2870 Two-year
29700 0.5081 0.1166 0.1539 0.1746 0.1970 0.3578 Two-year
32500 0.5427 0.0931 0.1261 0.1834 0.2446 0.3528 Two-year
28400 0.5022 0.2468 0.2699 0.2015 0.1615 0.1202 Two-year
20300 0.4412 0.1877 0.1916 0.2381 0.2313 0.1513 Two-year
27500 0.5033 0.2176 0.2278 0.2281 0.1906 0.1359 Two-year
27900 0.4981 0.1896 0.2131 0.2323 0.2195 0.1455 Two-year
32900 0.5380 0.0968 0.1276 0.1928 0.2419 0.3409 Two-year
27100 0.5020 0.2227 0.2267 0.2479 0.1940 0.1087 Two-year
31000 0.5295 0.1064 0.1486 0.1902 0.2438 0.3110 Two-year
28300 0.5030 0.2198 0.2338 0.2006 0.1723 0.1736 Two-year
23400 0.4669 0.1768 0.1884 0.1955 0.2502 0.1891 Two-year
33900 0.5498 0.1296 0.1442 0.1847 0.2003 0.3412 Two-year
29800 0.5210 0.1151 0.1655 0.1811 0.2259 0.3125 Two-year
30500 0.5263 0.3236 0.2200 0.1765 0.1443 0.1356 Two-year
31700 0.5324 0.1140 0.1538 0.2015 0.2668 0.2639 Two-year
30500 0.5212 0.1978 0.2413 0.2355 0.1837 0.1417 Two-year
25800 0.4942 0.3588 0.2647 0.1749 0.1288 0.0727 Two-year
30900 0.5224 0.1197 0.1589 0.1730 0.2092 0.3391 Two-year
30000 0.5239 0.1782 0.1906 0.2005 0.2230 0.2076 Two-year
22100 0.4581 0.1419 0.2096 0.2074 0.2122 0.2289 Two-year
37300 0.5676 0.0487 0.0893 0.1392 0.2440 0.4787 Two-year
23300 0.4697 0.1682 0.1649 0.2485 0.2740 0.1444 Two-year
28100 0.5033 0.2417 0.2239 0.2110 0.1696 0.1538 Two-year
28400 0.5064 0.2832 0.2632 0.1965 0.1370 0.1201 Two-year
31200 0.5234 0.1318 0.1640 0.2174 0.2511 0.2357 Two-year
21400 0.4412 0.2097 0.2327 0.2270 0.2123 0.1182 Two-year
25400 0.4800 0.2400 0.2366 0.2320 0.1838 0.1077 Two-year
26500 0.4941 0.1338 0.1881 0.1960 0.2147 0.2674 Two-year
27200 0.5012 0.1425 0.1846 0.2335 0.2158 0.2236 Two-year
30800 0.5262 0.1670 0.1972 0.2147 0.2175 0.2037 Two-year
25100 0.4810 0.1271 0.1641 0.2265 0.2700 0.2123 Two-year
33700 0.5387 0.0994 0.1662 0.2273 0.2708 0.2363 Two-year
38500 0.5858 0.0712 0.1136 0.1836 0.2614 0.3702 Two-year
31500 0.5290 0.1176 0.1730 0.2098 0.2370 0.2626 Two-year
29500 0.5116 0.2794 0.2321 0.1912 0.1581 0.1392 Two-year
33700 0.5458 0.1597 0.1957 0.2137 0.2027 0.2282 Two-year
32400 0.5373 0.2269 0.2599 0.2359 0.1758 0.1016 Two-year
28800 0.5094 0.1250 0.1757 0.2184 0.2643 0.2166 Two-year
31100 0.5254 0.0702 0.1133 0.1610 0.2140 0.4414 Two-year
25900 0.4907 0.2209 0.2042 0.2132 0.2154 0.1463 Two-year
30900 0.5246 0.1747 0.1915 0.2048 0.2033 0.2257 Two-year
33000 0.5386 0.1840 0.2430 0.2162 0.1943 0.1625 Two-year
30700 0.5225 0.1600 0.1835 0.2034 0.2515 0.2015 Two-year
31900 0.5379 0.1552 0.1778 0.2028 0.2219 0.2423 Two-year
37800 0.5777 0.1054 0.1584 0.2114 0.2357 0.2890 Two-year
31400 0.5310 0.0965 0.1561 0.1713 0.2068 0.3693 Two-year
28800 0.5126 0.2269 0.2257 0.1930 0.1422 0.2121 Two-year
31600 0.5341 0.0903 0.1487 0.2079 0.2670 0.2861 Two-year
30900 0.5288 0.0782 0.1309 0.1965 0.2749 0.3195 Two-year
34300 0.5514 0.0793 0.1352 0.2010 0.3071 0.2774 Two-year
28200 0.5049 0.2021 0.2297 0.2333 0.2029 0.1320 Two-year
25200 0.4818 0.2475 0.2382 0.1979 0.1875 0.1289 Two-year
32300 0.5185 0.1632 0.1836 0.2701 0.2143 0.1688 Two-year
30600 0.5241 0.1310 0.1723 0.1953 0.2134 0.2881 Two-year
25200 0.4905 0.1772 0.1836 0.2385 0.2549 0.1457 Two-year
25600 0.4906 0.2254 0.2697 0.2064 0.2000 0.0986 Two-year
36700 0.5698 0.0861 0.1280 0.1753 0.2347 0.3759 Two-year
28900 0.5121 0.1404 0.1828 0.2403 0.2621 0.1745 Two-year
25400 0.4800 0.2040 0.2665 0.2189 0.2101 0.1005 Two-year
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment