johnpoole/.block

## .block
license: gpl-3.0
border: no
height: 960

## README.md

      
    Raw
  

              README.md
            
          
    The scatterplot matrix visualizations pairwise correlations for multi-dimensional data; each cell in the matrix is a scatterplot. Scatterplot matrix design invented by J. A. Hartigan; see also R and GGobi.

  
## index.html
<!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;
}

circle.hidden {
  fill: #ccc !important;
}

.extent {
  fill: #000;
  fill-opacity: .125;
  stroke: #fff;
}

</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("rockmechanics.csv", function(error, data) {
  if (error) throw error;

  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", 4)
        .style("fill", function(d, i) { return color(i); });
  }

  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;
}

</script>

## rockmechanics.csv

          
            Vp
            Vs
            PR
            LamdaRho
            MuRho
            Ymod
            MR-LR

            
              3704
              2222
              0.22
              23.05
              29.64
              29.49
              6.59

            
              3226
              1852
              0.25
              21.29
              20.58
              21.08
              -0.71

            
              4167
              2500
              0.22
              29.18
              37.52
              37.32
              8.34

            
              3509
              2105
              0.22
              20.69
              26.60
              26.47
              5.91

            
              3636
              2222
              0.20
              20.09
              29.64
              29.08
              9.55

            
              3333
              1923
              0.25
              22.30
              22.20
              22.66
              -0.10

            
              4167
              2410
              0.25
              34.50
              34.85
              35.53
              0.35

            
              4167
              2685
              0.15
              17.69
              43.26
              40.44
              25.57

            
              3883
              2326
              0.22
              25.60
              32.46
              32.34
              6.86

            
              3636
              2174
              0.22
              22.64
              28.37
              28.30
              5.73

            
              4000
              2500
              0.18
              21.01
              37.52
              36.12
              16.51

            
              3846
              2222
              0.25
              29.51
              29.64
              30.23
              0.13

            
              4167
              2532
              0.21
              27.27
              38.47
              37.92
              11.20

            
              4167
              2500
              0.22
              29.18
              37.52
              37.32
              8.34

            
              4167
              2564
              0.20
              25.28
              39.46
              38.51
              14.18

            
              3571
              2222
              0.18
              17.28
              29.64
              28.65
              12.36

            
              3846
              2273
              0.23
              26.79
              31.00
              31.18
              4.22

            
              4167
              2632
              0.17
              21.07
              41.57
              39.64
              20.50

            
              4000
              2439
              0.20
              24.62
              35.71
              35.10
              11.08

            
              3846
              2381
              0.19
              20.74
              34.03
              33.04
              13.29

            
              4167
              2500
              0.22
              29.18
              37.52
              37.32
              8.34

            
              3846
              2326
              0.21
              23.87
              32.46
              32.12
              8.60

            
              4167
              2500
              0.22
              29.18
              37.52
              37.32
              8.34

            
              4000
              2500
              0.18
              21.01
              37.52
              36.12
              16.51

            
              3636
              2326
              0.15
              14.44
              32.46
              30.58
              18.02

            
              3846
              2439
              0.16
              17.38
              35.71
              33.92
              18.33

            
              3846
              2326
              0.21
              23.87
              32.46
              32.12
              8.60

            
              4167
              2439
              0.24
              32.79
              35.71
              36.13
              2.91

            
              3922
              2326
              0.23
              27.38
              32.46
              32.56
              5.08

            
              4348
              2500
              0.25
              38.44
              37.52
              38.37
              -0.92

            
              5263
              2857
              0.29
              79.88
              57.33
              55.86
              -22.55

            
              4878
              2778
              0.26
              58.73
              54.19
              51.53
              -4.55

            
              4545
              2632
              0.25
              47.83
              48.63
              45.80
              0.80

            
              4348
              2500
              0.25
              44.97
              43.89
              41.51
              -1.08

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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;
	}

	circle.hidden {
	fill: #ccc !important;
	}

	.extent {
	fill: #000;
	fill-opacity: .125;
	stroke: #fff;
	}

	</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("rockmechanics.csv", function(error, data) {
	if (error) throw error;

	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", 4)
	.style("fill", function(d, i) { return color(i); });
	}

	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;
	}

	</script>
Vp	Vs	PR	LamdaRho	MuRho	Ymod	MR-LR
3704	2222	0.22	23.05	29.64	29.49	6.59
3226	1852	0.25	21.29	20.58	21.08	-0.71
4167	2500	0.22	29.18	37.52	37.32	8.34
3509	2105	0.22	20.69	26.60	26.47	5.91
3636	2222	0.20	20.09	29.64	29.08	9.55
3333	1923	0.25	22.30	22.20	22.66	-0.10
4167	2410	0.25	34.50	34.85	35.53	0.35
4167	2685	0.15	17.69	43.26	40.44	25.57
3883	2326	0.22	25.60	32.46	32.34	6.86
3636	2174	0.22	22.64	28.37	28.30	5.73
4000	2500	0.18	21.01	37.52	36.12	16.51
3846	2222	0.25	29.51	29.64	30.23	0.13
4167	2532	0.21	27.27	38.47	37.92	11.20
4167	2500	0.22	29.18	37.52	37.32	8.34
4167	2564	0.20	25.28	39.46	38.51	14.18
3571	2222	0.18	17.28	29.64	28.65	12.36
3846	2273	0.23	26.79	31.00	31.18	4.22
4167	2632	0.17	21.07	41.57	39.64	20.50
4000	2439	0.20	24.62	35.71	35.10	11.08
3846	2381	0.19	20.74	34.03	33.04	13.29
4167	2500	0.22	29.18	37.52	37.32	8.34
3846	2326	0.21	23.87	32.46	32.12	8.60
4167	2500	0.22	29.18	37.52	37.32	8.34
4000	2500	0.18	21.01	37.52	36.12	16.51
3636	2326	0.15	14.44	32.46	30.58	18.02
3846	2439	0.16	17.38	35.71	33.92	18.33
3846	2326	0.21	23.87	32.46	32.12	8.60
4167	2439	0.24	32.79	35.71	36.13	2.91
3922	2326	0.23	27.38	32.46	32.56	5.08
4348	2500	0.25	38.44	37.52	38.37	-0.92
5263	2857	0.29	79.88	57.33	55.86	-22.55
4878	2778	0.26	58.73	54.19	51.53	-4.55
4545	2632	0.25	47.83	48.63	45.80	0.80
4348	2500	0.25	44.97	43.89	41.51	-1.08