jwildfire · March 22, 2019 20:28
diff --git a/README.md b/README.md
diff --git a/hy.csv b/hy.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Interactive Scatter Plot Matrix</title>

        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>

        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
        <script type = 'text/javascript' src = 'scatterPlotMatrix.js'></script>


        <style>
          /*everything*/
            @import url(https://fonts.googleapis.com/css?family = Open+Sans:400,300);

            * {
                padding: 0;
                margin: 0;
                font-family: 'Open Sans', Helvetica, Arial, sans-serif;
            }

            #title {
                width: 96%;
                margin: 2%;
                border-bottom: 1px solid lightgray;
                font-weight: lighter;
                font-size: 250%;
            }

          /*tabs*/
            div.tab {
                width: 96%;
                margin: 2%;
                font-weight: lighter;
                font-size: 150%;
                overflow: hidden;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            div.tab button {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
            }
            div.tab button:hover {
                background-color: #ddd;
            }
            div.tab button.active {
                background-color: #ccc;
            }
            .tabcontent {
                display: none;
                padding: 6px 12px;
                border: 1px solid #ccc;
                border-top: none;
            }

          /*scatter plots*/
            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>
    </head>

    <body>
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event, 'iris')">Iris Measurements</button>
            <button class="tablinks" onclick="openTab(event, 'VS')">Vital Signs</button>
            <button class="tablinks" onclick="openTab(event, 'hy')">Liver Function Tests</button>
        </div>

        <div id="iris" class="tabcontent" style = "display:block"></div>
        <div id="VS" class="tabcontent"></div>
        <div id="hy" class="tabcontent"></div>
    </body>

    <script defer type = 'text/javascript' src = 'index.js'></script>
 </html>
diff --git a/index.js b/index.js

 function toggleDetails(){
  var details = document.getElementById("vl-ex-details");
  if (details.style.display === "none") {
      details.style.display = "block";
  } else {
      details.style.display = "none";
    }
 }

 function openTab(evt, id) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(id).style.display = "block";
    evt.currentTarget.className += " active";
 }

 function toggleDetails(){
  var details = document.getElementById("vl-ex-details");
  if (details.style.display === "none") {
      details.style.display = "block";
  } else {
      details.style.display = "none";
    }
 }

 /*------------------------------------------------------------------------------------------------\
  Iris Measurements
 \------------------------------------------------------------------------------------------------*/

    var element3 = '#iris';
    var dataPath3 = 'https://rhoinc.github.io/data-library/data/miscellaneous/iris.csv';
    var settings3 = {
        keys: ['observation'],
        measure_col: 'dimension',
        measures: ['sepal length', 'sepal width', 'petal length', 'petal width'],
        result_col: 'length',
        group_col: 'species',
        size: 200,
        padding: 20};

    d3.csv(dataPath3, function(data) {
        var transposed = [];
        data.forEach((d,i) => {
                settings3.measures.forEach(measure => {
                    transposed.push(
                        {observation: i
                        ,dimension: measure
                        ,length: d[measure]
                        ,species: d.species});
                });
            });

        scatterPlotMatrix
            (element3
            ,transposed
            ,settings3);
    });

 /*------------------------------------------------------------------------------------------------\
  Vital Signs
 \------------------------------------------------------------------------------------------------*/

    var element1 = '#VS';

    var dataPath1 = 'https://rhoinc.github.io/data-library/data/clinical-trials/sdtm/vs.csv';
    var settings1 = {
        keys: ['USUBJID', 'VISIT'],
        measure_col: 'VSTEST',
        result_col: 'VSSTRESN',
        group_col: 'site',
        size: 200,
        padding: 20};

    d3.csv(dataPath1, function(data) {
        data.forEach(function(d) {
                d.VSSTRESN = +d.VSSTRESN;
                d.site = d.USUBJID.split('-')[0];
                d.VSSTNRLO = +d.VSSTNRLO;
                d.VSSTNRHI = +d.VSSTNRHI;
                d.level = d.VSSTRESN >= d.VSSTNRLO && d.VSSTRESN <= d.VSSTNRHI
                    ? 'Normal'
                    : d.VSSTRESN < d.VSSTNRLO
                        ? 'Low'
                        : 'High';
            });

        scatterPlotMatrix
            (element1
            ,data.filter(d => d.VISIT === 'Screening')
            ,settings1);
    });

 /*------------------------------------------------------------------------------------------------\
  Liver Function Tests
 \------------------------------------------------------------------------------------------------*/

    var element2 = '#hy';
    var dataPath2 = './hy.csv';
    var settings2 = {
        keys: ['USUBJID', 'VISIT'],
        measure_col: 'TEST',
        result_col: 'STRESN',
        group_col: 'VISIT',
        size: 200,
        padding: 20};

    d3.csv(dataPath2, function(data) {
        data.forEach(function(d) {
                d.site = d.USUBJID.split('-')[0];
            });

        scatterPlotMatrix
            (element2
            ,data
            ,settings2);
    });
diff --git a/package.json b/package.json
 {
  "homepage":"example.html",
  "main": "index.js",
  "name": "scatter-plot-matrix",
  "label":"Interactive Scatter Plot Lattice with Vital Signs Data",
  "version": "1.0.1",
  "description": "A paneled series of scatter plots plotting every measure against every other measure",
  "author": "Rho, Inc.",
  "license": "MIT",
  "keywords":["javascript","interactive", "scatter plot", "lattice", "matrix", "bivariate"],
  "dependencies": {
    "d3": "~3"
  },
  "dataDependecies":[
    "../../data/iris.csv",
    "../../data/safetyData/SDTM/VS.csv",
    "../0016-safety-outlier-explorer-hys-law/hy.csv"
  ]
 }
diff --git a/scatterPlotMatrix.js b/scatterPlotMatrix.js
 /*------------------------------------------------------------------------------------------------\
  Functions
 \------------------------------------------------------------------------------------------------*/

  //generate data array representing matrix of one item per measure combination
    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;
    }

    function scatterPlotMatrix(element, data, settings) {
      //main object
        var scatterPlotMatrix = {};
            scatterPlotMatrix.element = element;
            scatterPlotMatrix.selection = d3.select(element);

      //settings
        if (!settings.measures)
            settings.measures = d3.set(
                    data.map(d => d[settings.measure_col]))
                .values();
        settings.nMeasures = settings.measures.length;
        scatterPlotMatrix.settings = Object.assign({}, settings);

      //data
        scatterPlotMatrix.data = {raw: data};
        scatterPlotMatrix.data.raw
            .forEach(d => {
                d[settings.result_col] = +d[settings.result_col];
            });
        scatterPlotMatrix.data.measures = settings.measures
            .map(measure => {
                var summary = {};
                    summary.measure = measure;
                    summary.data = data.filter(d => d[settings.measure_col] === measure);
                    summary.values = summary.data.map(d => +d[settings.result_col]).sort();
                    summary.domain = d3.extent(summary.values);

                return summary;
            });
        scatterPlotMatrix.data.crossed = cross(scatterPlotMatrix.data.measures,scatterPlotMatrix.data.measures);

      //x
        scatterPlotMatrix.xScale = d3.scale.linear()
            .range([settings.padding / 2, settings.size - settings.padding / 2]);
        scatterPlotMatrix.xAxis = d3.svg.axis()
            .scale(scatterPlotMatrix.xScale)
            .orient('bottom')
            .ticks(6);
        scatterPlotMatrix.xAxis.tickSize(settings.size * settings.nMeasures);

      //y
        scatterPlotMatrix.yScale = d3.scale.linear()
            .range([settings.size - settings.padding / 2, settings.padding / 2]);
        scatterPlotMatrix.yAxis = d3.svg.axis()
            .scale(scatterPlotMatrix.yScale)
            .orient('left')
            .ticks(6);
        scatterPlotMatrix.yAxis.tickSize(-settings.size * settings.nMeasures);

      //color
        scatterPlotMatrix.colorScale = d3.scale.category10();

        var svg = scatterPlotMatrix.selection
            .append('svg')
            .attr('width', settings.size * settings.nMeasures + settings.padding)
            .attr('height', settings.size * settings.nMeasures + settings.padding)
            .append('g')
            .attr('transform', 'translate(' + settings.padding + ',' + settings.padding / 2 + ')');

        svg.selectAll('g.x.axis')
                .data(scatterPlotMatrix.data.measures)
                .enter()
            .append('g')
            .classed('x axis', true)
            .attr('transform', function(d, i) {
                return 'translate(' + (settings.nMeasures - i - 1) * settings.size + ',0)'; })
            .each(function(d) {
                scatterPlotMatrix.xScale
                    .domain(d.domain);
                d3.select(this)
                    .call(scatterPlotMatrix.xAxis);
            });

        svg.selectAll('g.y.axis')
                .data(scatterPlotMatrix.data.measures)
                .enter()
            .append('g')
            .classed('y axis', true)
            .attr('transform', function(d, i) {
                return 'translate(0,' + i * settings.size + ')'; })
            .each(function(d) {
                scatterPlotMatrix.yScale
                    .domain(d.domain);
                d3.select(this)
                    .call(scatterPlotMatrix.yAxis);
            });

        function plot(p) {
            var cell = d3.select(this);

            scatterPlotMatrix.xScale.domain(p.x.domain);
            scatterPlotMatrix.yScale.domain(p.y.domain);

            var rect = cell.append('rect')
                .attr('class', 'frame')
                .attr('x', settings.padding / 2)
                .attr('y', settings.padding / 2)
                .attr('width', settings.size - settings.padding)
                .attr('height', settings.size - settings.padding);

            var bivariateData = data
                .filter(d =>
                    d[settings.measure_col] === p.x.measure ||
                    d[settings.measure_col] === p.y.measure);
            var nested = d3.nest()
                .key(d => settings.keys.map(key => d[key]).concat(d[settings.group_col]).join('||'))
                .rollup(d => {
                    var results = {};
                    d.forEach(di => {
                        var measure = di[settings.measure_col];
                        results[measure] = di[settings.result_col];
                    });
                    return results;
                })
                .entries(bivariateData);
            var transposed = [];
            nested.forEach((d,i) => {
                settings.keys
                    .forEach((key,j) => {
                        d.values[key] = d.key.split('||')[j];
                    });
                d.values[settings.group_col] = d.key.split('||')[settings.keys.length];
                transposed.push(d.values);
            });
            var points = cell.selectAll('circle')
                    .data(transposed)
                    .enter()
                .append('circle')
                .attr('cx', function(d) { return scatterPlotMatrix.xScale(d[p.x.measure]); })
                .attr('cy', function(d) { return scatterPlotMatrix.yScale(d[p.y.measure]); })
                .attr('r', 4)
                .style('fill', function(d) { return scatterPlotMatrix.colorScale(d[settings.group_col]); });
        }

        var cells = svg.selectAll('g.cell')
                .data(scatterPlotMatrix.data.crossed)
                .enter()
            .append('g')
            .classed('cell', true)
            .attr('transform', function(d) {
                var x = (settings.nMeasures - d.i - 1) * settings.size;
                var y = d.j * settings.size;
                return 'translate(' + x + ',' + y + ')'; })
            .each(plot);

      //Titles for the diagonal.
        cells.filter(function(d) { return d.i === d.j; })
            .append('text')
            .attr('x', settings.padding)
            .attr('y', settings.padding)
            .attr('dy', '.71em')
            .text(function(d) {
                return d.x.measure; });

      //Brushing.
        var brush = d3.svg.brush()
            .x(scatterPlotMatrix.xScale)
            .y(scatterPlotMatrix.yScale)
            .on('brushstart', brushstart)
            .on('brush', brushmove)
            .on('brushend', brushend);
        var brushCell;

      //Clear the previously-active brush, if any.
        function brushstart(p) {
            if (brushCell !== this) {
                d3.select(brushCell).call(brush.clear());
                scatterPlotMatrix.xScale.domain(p.x.domain);
                scatterPlotMatrix.yScale.domain(p.y.domain);
                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.measure] || d[p.x.measure] > e[1][0]
                        || e[0][1] > d[p.y.measure] || d[p.y.measure] > e[1][1];
                });
        }

      //If the brush is empty, select all circles.
        function brushend() {
            if (brush.empty())
                svg.selectAll('.hidden')
                    .classed('hidden', false);
        }

        cells.call(brush);

        return scatterPlotMatrix;
    }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Interactive Scatter Plot Matrix</title>

	<meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>

	<script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
	<script type = 'text/javascript' src = 'scatterPlotMatrix.js'></script>


	<style>
	/everything/
	@import url(https://fonts.googleapis.com/css?family = Open+Sans:400,300);

	* {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	}

	#title {
	width: 96%;
	margin: 2%;
	border-bottom: 1px solid lightgray;
	font-weight: lighter;
	font-size: 250%;
	}

	/tabs/
	div.tab {
	width: 96%;
	margin: 2%;
	font-weight: lighter;
	font-size: 150%;
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	}
	div.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	}
	div.tab button:hover {
	background-color: #ddd;
	}
	div.tab button.active {
	background-color: #ccc;
	}
	.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	}

	/scatter plots/
	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>
	</head>

	<body>
	<div class="tab">
	<button class="tablinks active" onclick="openTab(event, 'iris')">Iris Measurements</button>
	<button class="tablinks" onclick="openTab(event, 'VS')">Vital Signs</button>
	<button class="tablinks" onclick="openTab(event, 'hy')">Liver Function Tests</button>
	</div>

	<div id="iris" class="tabcontent" style = "display:block"></div>
	<div id="VS" class="tabcontent"></div>
	<div id="hy" class="tabcontent"></div>
	</body>

	<script defer type = 'text/javascript' src = 'index.js'></script>
	</html>

	function toggleDetails(){
	var details = document.getElementById("vl-ex-details");
	if (details.style.display === "none") {
	details.style.display = "block";
	} else {
	details.style.display = "none";
	}
	}

	function openTab(evt, id) {
	// Declare all variables
	var i, tabcontent, tablinks;

	// Get all elements with class="tabcontent" and hide them
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}

	// Get all elements with class="tablinks" and remove the class "active"
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	// Show the current tab, and add an "active" class to the button that opened the tab
	document.getElementById(id).style.display = "block";
	evt.currentTarget.className += " active";
	}

	function toggleDetails(){
	var details = document.getElementById("vl-ex-details");
	if (details.style.display === "none") {
	details.style.display = "block";
	} else {
	details.style.display = "none";
	}
	}

	/*------------------------------------------------------------------------------------------------\
	Iris Measurements
	\------------------------------------------------------------------------------------------------*/

	var element3 = '#iris';
	var dataPath3 = 'https://rhoinc.github.io/data-library/data/miscellaneous/iris.csv';
	var settings3 = {
	keys: ['observation'],
	measure_col: 'dimension',
	measures: ['sepal length', 'sepal width', 'petal length', 'petal width'],
	result_col: 'length',
	group_col: 'species',
	size: 200,
	padding: 20};

	d3.csv(dataPath3, function(data) {
	var transposed = [];
	data.forEach((d,i) => {
	settings3.measures.forEach(measure => {
	transposed.push(
	{observation: i
	,dimension: measure
	,length: d[measure]
	,species: d.species});
	});
	});

	scatterPlotMatrix
	(element3
	,transposed
	,settings3);
	});

	/*------------------------------------------------------------------------------------------------\
	Vital Signs
	\------------------------------------------------------------------------------------------------*/

	var element1 = '#VS';

	var dataPath1 = 'https://rhoinc.github.io/data-library/data/clinical-trials/sdtm/vs.csv';
	var settings1 = {
	keys: ['USUBJID', 'VISIT'],
	measure_col: 'VSTEST',
	result_col: 'VSSTRESN',
	group_col: 'site',
	size: 200,
	padding: 20};

	d3.csv(dataPath1, function(data) {
	data.forEach(function(d) {
	d.VSSTRESN = +d.VSSTRESN;
	d.site = d.USUBJID.split('-')[0];
	d.VSSTNRLO = +d.VSSTNRLO;
	d.VSSTNRHI = +d.VSSTNRHI;
	d.level = d.VSSTRESN >= d.VSSTNRLO && d.VSSTRESN <= d.VSSTNRHI
	? 'Normal'
	: d.VSSTRESN < d.VSSTNRLO
	? 'Low'
	: 'High';
	});

	scatterPlotMatrix
	(element1
	,data.filter(d => d.VISIT === 'Screening')
	,settings1);
	});

	/*------------------------------------------------------------------------------------------------\
	Liver Function Tests
	\------------------------------------------------------------------------------------------------*/

	var element2 = '#hy';
	var dataPath2 = './hy.csv';
	var settings2 = {
	keys: ['USUBJID', 'VISIT'],
	measure_col: 'TEST',
	result_col: 'STRESN',
	group_col: 'VISIT',
	size: 200,
	padding: 20};

	d3.csv(dataPath2, function(data) {
	data.forEach(function(d) {
	d.site = d.USUBJID.split('-')[0];
	});

	scatterPlotMatrix
	(element2
	,data
	,settings2);
	});
	{
	"homepage":"example.html",
	"main": "index.js",
	"name": "scatter-plot-matrix",
	"label":"Interactive Scatter Plot Lattice with Vital Signs Data",
	"version": "1.0.1",
	"description": "A paneled series of scatter plots plotting every measure against every other measure",
	"author": "Rho, Inc.",
	"license": "MIT",
	"keywords":["javascript","interactive", "scatter plot", "lattice", "matrix", "bivariate"],
	"dependencies": {
	"d3": "~3"
	},
	"dataDependecies":[
	"../../data/iris.csv",
	"../../data/safetyData/SDTM/VS.csv",
	"../0016-safety-outlier-explorer-hys-law/hy.csv"
	]
	}
	/*------------------------------------------------------------------------------------------------\
	Functions
	\------------------------------------------------------------------------------------------------*/

	//generate data array representing matrix of one item per measure combination
	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;
	}

	function scatterPlotMatrix(element, data, settings) {
	//main object
	var scatterPlotMatrix = {};
	scatterPlotMatrix.element = element;
	scatterPlotMatrix.selection = d3.select(element);

	//settings
	if (!settings.measures)
	settings.measures = d3.set(
	data.map(d => d[settings.measure_col]))
	.values();
	settings.nMeasures = settings.measures.length;
	scatterPlotMatrix.settings = Object.assign({}, settings);

	//data
	scatterPlotMatrix.data = {raw: data};
	scatterPlotMatrix.data.raw
	.forEach(d => {
	d[settings.result_col] = +d[settings.result_col];
	});
	scatterPlotMatrix.data.measures = settings.measures
	.map(measure => {
	var summary = {};
	summary.measure = measure;
	summary.data = data.filter(d => d[settings.measure_col] === measure);
	summary.values = summary.data.map(d => +d[settings.result_col]).sort();
	summary.domain = d3.extent(summary.values);

	return summary;
	});
	scatterPlotMatrix.data.crossed = cross(scatterPlotMatrix.data.measures,scatterPlotMatrix.data.measures);

	//x
	scatterPlotMatrix.xScale = d3.scale.linear()
	.range([settings.padding / 2, settings.size - settings.padding / 2]);
	scatterPlotMatrix.xAxis = d3.svg.axis()
	.scale(scatterPlotMatrix.xScale)
	.orient('bottom')
	.ticks(6);
	scatterPlotMatrix.xAxis.tickSize(settings.size * settings.nMeasures);

	//y
	scatterPlotMatrix.yScale = d3.scale.linear()
	.range([settings.size - settings.padding / 2, settings.padding / 2]);
	scatterPlotMatrix.yAxis = d3.svg.axis()
	.scale(scatterPlotMatrix.yScale)
	.orient('left')
	.ticks(6);
	scatterPlotMatrix.yAxis.tickSize(-settings.size * settings.nMeasures);

	//color
	scatterPlotMatrix.colorScale = d3.scale.category10();

	var svg = scatterPlotMatrix.selection
	.append('svg')
	.attr('width', settings.size * settings.nMeasures + settings.padding)
	.attr('height', settings.size * settings.nMeasures + settings.padding)
	.append('g')
	.attr('transform', 'translate(' + settings.padding + ',' + settings.padding / 2 + ')');

	svg.selectAll('g.x.axis')
	.data(scatterPlotMatrix.data.measures)
	.enter()
	.append('g')
	.classed('x axis', true)
	.attr('transform', function(d, i) {
	return 'translate(' + (settings.nMeasures - i - 1) * settings.size + ',0)'; })
	.each(function(d) {
	scatterPlotMatrix.xScale
	.domain(d.domain);
	d3.select(this)
	.call(scatterPlotMatrix.xAxis);
	});

	svg.selectAll('g.y.axis')
	.data(scatterPlotMatrix.data.measures)
	.enter()
	.append('g')
	.classed('y axis', true)
	.attr('transform', function(d, i) {
	return 'translate(0,' + i * settings.size + ')'; })
	.each(function(d) {
	scatterPlotMatrix.yScale
	.domain(d.domain);
	d3.select(this)
	.call(scatterPlotMatrix.yAxis);
	});

	function plot(p) {
	var cell = d3.select(this);

	scatterPlotMatrix.xScale.domain(p.x.domain);
	scatterPlotMatrix.yScale.domain(p.y.domain);

	var rect = cell.append('rect')
	.attr('class', 'frame')
	.attr('x', settings.padding / 2)
	.attr('y', settings.padding / 2)
	.attr('width', settings.size - settings.padding)
	.attr('height', settings.size - settings.padding);

	var bivariateData = data
	.filter(d =>
	d[settings.measure_col] === p.x.measure \|\|
	d[settings.measure_col] === p.y.measure);
	var nested = d3.nest()
	.key(d => settings.keys.map(key => d[key]).concat(d[settings.group_col]).join('\|\|'))
	.rollup(d => {
	var results = {};
	d.forEach(di => {
	var measure = di[settings.measure_col];
	results[measure] = di[settings.result_col];
	});
	return results;
	})
	.entries(bivariateData);
	var transposed = [];
	nested.forEach((d,i) => {
	settings.keys
	.forEach((key,j) => {
	d.values[key] = d.key.split('\|\|')[j];
	});
	d.values[settings.group_col] = d.key.split('\|\|')[settings.keys.length];
	transposed.push(d.values);
	});
	var points = cell.selectAll('circle')
	.data(transposed)
	.enter()
	.append('circle')
	.attr('cx', function(d) { return scatterPlotMatrix.xScale(d[p.x.measure]); })
	.attr('cy', function(d) { return scatterPlotMatrix.yScale(d[p.y.measure]); })
	.attr('r', 4)
	.style('fill', function(d) { return scatterPlotMatrix.colorScale(d[settings.group_col]); });
	}

	var cells = svg.selectAll('g.cell')
	.data(scatterPlotMatrix.data.crossed)
	.enter()
	.append('g')
	.classed('cell', true)
	.attr('transform', function(d) {
	var x = (settings.nMeasures - d.i - 1) * settings.size;
	var y = d.j * settings.size;
	return 'translate(' + x + ',' + y + ')'; })
	.each(plot);

	//Titles for the diagonal.
	cells.filter(function(d) { return d.i === d.j; })
	.append('text')
	.attr('x', settings.padding)
	.attr('y', settings.padding)
	.attr('dy', '.71em')
	.text(function(d) {
	return d.x.measure; });

	//Brushing.
	var brush = d3.svg.brush()
	.x(scatterPlotMatrix.xScale)
	.y(scatterPlotMatrix.yScale)
	.on('brushstart', brushstart)
	.on('brush', brushmove)
	.on('brushend', brushend);
	var brushCell;

	//Clear the previously-active brush, if any.
	function brushstart(p) {
	if (brushCell !== this) {
	d3.select(brushCell).call(brush.clear());
	scatterPlotMatrix.xScale.domain(p.x.domain);
	scatterPlotMatrix.yScale.domain(p.y.domain);
	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.measure] \|\| d[p.x.measure] > e[1][0]
	\|\| e[0][1] > d[p.y.measure] \|\| d[p.y.measure] > e[1][1];
	});
	}

	//If the brush is empty, select all circles.
	function brushend() {
	if (brush.empty())
	svg.selectAll('.hidden')
	.classed('hidden', false);
	}

	cells.call(brush);

	return scatterPlotMatrix;
	}