Correlation Matrix VII

A hexbin correlation matrix (or pairs plot, if you prefer)

This iteration experiments with a white background and a color scale that starts at a faint shade of gray.

we declare a scale colors for picking the theme colors of the small charts and assign the faintGray hex color to an eponymous variable:

colors = d3.scale.ordinal()
  .range(["#827abf", "#f62150", "#6f89b6", "#f5e0b7", "#5b1e37", "#b9e3c5"]);

var faintGray = "#f0f0f0";

then we declare a different scale helpfully named color to color each hex on a scale of faint gray to the theme color for the current small chart. We use d3’s handy d3.interpolateLab L*a*b* color space interpolator.

var color = d3.scale.linear()
  .domain([0, d3.max(hexbinData, function(d) {
    return d.length;
  })])
  .range([faintGray, colors(row + col)]) 
  .interpolate(d3.interpolateLab);

This example also adds thin borders to the small multiple plots to distinguish them from the white background of the larger chart area.

Forked from Correlation Matrix VI by micahstubbs

Originally inspired by the Simple Correlation Matrix block from emeeks