Skip to content

Instantly share code, notes, and snippets.

@fdeheeger
Forked from mbostock/.block
Last active December 27, 2015 01:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save fdeheeger/7249196 to your computer and use it in GitHub Desktop.
Save fdeheeger/7249196 to your computer and use it in GitHub Desktop.
add 10 to each values of the sepal length

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.

sepal length sepal width petal length petal width species
15.1 3.5 1.4 0.2 setosa
14.9 3.0 1.4 0.2 setosa
14.7 3.2 1.3 0.2 setosa
14.6 3.1 1.5 0.2 setosa
15.0 3.6 1.4 0.2 setosa
15.4 3.9 1.7 0.4 setosa
14.6 3.4 1.4 0.3 setosa
15.0 3.4 1.5 0.2 setosa
14.4 2.9 1.4 0.2 setosa
14.9 3.1 1.5 0.1 setosa
15.4 3.7 1.5 0.2 setosa
14.8 3.4 1.6 0.2 setosa
14.8 3.0 1.4 0.1 setosa
14.3 3.0 1.1 0.1 setosa
15.8 4.0 1.2 0.2 setosa
15.7 4.4 1.5 0.4 setosa
15.4 3.9 1.3 0.4 setosa
15.1 3.5 1.4 0.3 setosa
15.7 3.8 1.7 0.3 setosa
15.1 3.8 1.5 0.3 setosa
15.4 3.4 1.7 0.2 setosa
15.1 3.7 1.5 0.4 setosa
14.6 3.6 1.0 0.2 setosa
15.1 3.3 1.7 0.5 setosa
14.8 3.4 1.9 0.2 setosa
15.0 3.0 1.6 0.2 setosa
15.0 3.4 1.6 0.4 setosa
15.2 3.5 1.5 0.2 setosa
15.2 3.4 1.4 0.2 setosa
14.7 3.2 1.6 0.2 setosa
14.8 3.1 1.6 0.2 setosa
15.4 3.4 1.5 0.4 setosa
15.2 4.1 1.5 0.1 setosa
15.5 4.2 1.4 0.2 setosa
14.9 3.1 1.5 0.2 setosa
15.0 3.2 1.2 0.2 setosa
15.5 3.5 1.3 0.2 setosa
14.9 3.6 1.4 0.1 setosa
14.4 3.0 1.3 0.2 setosa
15.1 3.4 1.5 0.2 setosa
15.0 3.5 1.3 0.3 setosa
14.5 2.3 1.3 0.3 setosa
14.4 3.2 1.3 0.2 setosa
15.0 3.5 1.6 0.6 setosa
15.1 3.8 1.9 0.4 setosa
14.8 3.0 1.4 0.3 setosa
15.1 3.8 1.6 0.2 setosa
14.6 3.2 1.4 0.2 setosa
15.3 3.7 1.5 0.2 setosa
15.0 3.3 1.4 0.2 setosa
17.0 3.2 4.7 1.4 versicolor
16.4 3.2 4.5 1.5 versicolor
16.9 3.1 4.9 1.5 versicolor
15.5 2.3 4.0 1.3 versicolor
16.5 2.8 4.6 1.5 versicolor
15.7 2.8 4.5 1.3 versicolor
16.3 3.3 4.7 1.6 versicolor
14.9 2.4 3.3 1.0 versicolor
16.6 2.9 4.6 1.3 versicolor
15.2 2.7 3.9 1.4 versicolor
15.0 2.0 3.5 1.0 versicolor
15.9 3.0 4.2 1.5 versicolor
16.0 2.2 4.0 1.0 versicolor
16.1 2.9 4.7 1.4 versicolor
15.6 2.9 3.6 1.3 versicolor
16.7 3.1 4.4 1.4 versicolor
15.6 3.0 4.5 1.5 versicolor
15.8 2.7 4.1 1.0 versicolor
16.2 2.2 4.5 1.5 versicolor
15.6 2.5 3.9 1.1 versicolor
15.9 3.2 4.8 1.8 versicolor
16.1 2.8 4.0 1.3 versicolor
16.3 2.5 4.9 1.5 versicolor
16.1 2.8 4.7 1.2 versicolor
16.4 2.9 4.3 1.3 versicolor
16.6 3.0 4.4 1.4 versicolor
16.8 2.8 4.8 1.4 versicolor
16.7 3.0 5.0 1.7 versicolor
16.0 2.9 4.5 1.5 versicolor
15.7 2.6 3.5 1.0 versicolor
15.5 2.4 3.8 1.1 versicolor
15.5 2.4 3.7 1.0 versicolor
15.8 2.7 3.9 1.2 versicolor
16.0 2.7 5.1 1.6 versicolor
15.4 3.0 4.5 1.5 versicolor
16.0 3.4 4.5 1.6 versicolor
16.7 3.1 4.7 1.5 versicolor
16.3 2.3 4.4 1.3 versicolor
15.6 3.0 4.1 1.3 versicolor
15.5 2.5 4.0 1.3 versicolor
15.5 2.6 4.4 1.2 versicolor
16.1 3.0 4.6 1.4 versicolor
15.8 2.6 4.0 1.2 versicolor
15.0 2.3 3.3 1.0 versicolor
15.6 2.7 4.2 1.3 versicolor
15.7 3.0 4.2 1.2 versicolor
15.7 2.9 4.2 1.3 versicolor
16.2 2.9 4.3 1.3 versicolor
15.1 2.5 3.0 1.1 versicolor
15.7 2.8 4.1 1.3 versicolor
6.3 3.3 6.0 2.5 virginica
5.8 2.7 5.1 1.9 virginica
7.1 3.0 5.9 2.1 virginica
6.3 2.9 5.6 1.8 virginica
6.5 3.0 5.8 2.2 virginica
7.6 3.0 6.6 2.1 virginica
4.9 2.5 4.5 1.7 virginica
7.3 2.9 6.3 1.8 virginica
6.7 2.5 5.8 1.8 virginica
7.2 3.6 6.1 2.5 virginica
6.5 3.2 5.1 2.0 virginica
6.4 2.7 5.3 1.9 virginica
6.8 3.0 5.5 2.1 virginica
5.7 2.5 5.0 2.0 virginica
5.8 2.8 5.1 2.4 virginica
6.4 3.2 5.3 2.3 virginica
6.5 3.0 5.5 1.8 virginica
7.7 3.8 6.7 2.2 virginica
7.7 2.6 6.9 2.3 virginica
6.0 2.2 5.0 1.5 virginica
6.9 3.2 5.7 2.3 virginica
5.6 2.8 4.9 2.0 virginica
7.7 2.8 6.7 2.0 virginica
6.3 2.7 4.9 1.8 virginica
6.7 3.3 5.7 2.1 virginica
7.2 3.2 6.0 1.8 virginica
6.2 2.8 4.8 1.8 virginica
6.1 3.0 4.9 1.8 virginica
6.4 2.8 5.6 2.1 virginica
7.2 3.0 5.8 1.6 virginica
7.4 2.8 6.1 1.9 virginica
7.9 3.8 6.4 2.0 virginica
6.4 2.8 5.6 2.2 virginica
6.3 2.8 5.1 1.5 virginica
6.1 2.6 5.6 1.4 virginica
6.3 3.4 5.6 2.4 virginica
6.4 3.1 5.5 1.8 virginica
6.0 3.0 4.8 1.8 virginica
6.9 3.1 5.4 2.1 virginica
6.7 3.1 5.6 2.4 virginica
6.9 3.1 5.1 2.3 virginica
5.8 2.7 5.1 1.9 virginica
6.8 3.2 5.9 2.3 virginica
6.7 3.3 5.7 2.5 virginica
6.7 3.0 5.2 2.3 virginica
6.3 2.5 5.0 1.9 virginica
6.5 3.0 5.2 2.0 virginica
6.2 3.4 5.4 2.3 virginica
5.9 3.0 5.1 1.8 virginica
<!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;
}
.frame {
fill: none;
stroke: #aaa;
}
circle {
fill-opacity: .7;
}
circle.hidden {
fill: #ccc !important;
}
.extent {
fill: #000;
fill-opacity: .125;
stroke: #fff;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
size = 150,
padding = 19.5;
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(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var color = d3.scale.category10();
d3.csv("flowers1.csv", function(error, data) {
var domainByTrait = {},
traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }),
n = traits.length;
traits.forEach(function(trait) {
domainByTrait[trait] = d3.extent(data, function(d) { return +d[trait]; });
});
xAxis.tickSize(size * n);
yAxis.tickSize(-size * n);
var brush = d3.svg.brush()
.x(x)
.y(y)
.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend);
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(traits)
.enter().append("g")
.attr("class", "x axis")
.attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; })
.each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); });
svg.selectAll(".y.axis")
.data(traits)
.enter().append("g")
.attr("class", "y axis")
.attr("transform", function(d, i) { return "translate(0," + 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", "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; });
cell.call(brush);
function plot(p) {
var cell = d3.select(this);
x.domain(domainByTrait[p.x]);
y.domain(domainByTrait[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", 3)
.style("fill", function(d) { return color(d.species); });
}
var brushCell;
// Clear the previously-active brush, if any.
function brushstart(p) {
if (brushCell !== this) {
d3.select(brushCell).call(brush.clear());
x.domain(domainByTrait[p.x]);
y.domain(domainByTrait[p.y]);
brushCell = this;
}
}
// Highlight the selected circles.
function brushmove(p) {
var e = brush.extent();
svg.selectAll("circle").classed("hidden", function(d) {
return e[0][0] > d[p.x] || d[p.x] > e[1][0]
|| e[0][1] > d[p.y] || d[p.y] > e[1][1];
});
}
// If the brush is empty, select all circles.
function brushend() {
if (brush.empty()) svg.selectAll(".hidden").classed("hidden", false);
}
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;
}
d3.select(self.frameElement).style("height", size * n + padding + 20 + "px");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment