Scatterplot Matrix

<!DOCTYPE html>
<style>
  svg {
    font-size:14;
    padding: 4px;
  }

line {
    stroke: lightgrey
  }

circle {
    fill-opacity: .2;
  }

rect {
    fill-opacity: .2;
  }
</style>
<body>
  <svg width = "960" height = "765" id = "vis1"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var svg = d3.select("#vis1"),
        margin = {top: 20, right: 20, bottom: 80, left: 50},
        width = svg.attr("width") - margin.left - margin.right,
        height = svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform",
           "translate(" + margin.left + "," + margin.top + ")");

//Title
    svg.append("text")
      .attr("y",15)
      .style("font-size",24)
      .text("Mobility Colored by Quality of Schooling");

//predictor labels
    svg.append("text")
    	.attr("transform","translate(20,110) rotate(-90)")
    	.text("K Q5");
    
    svg.append("text")
    	.attr("transform","translate(20,240) rotate(-90)")
    	.text("K Q4");
    
    svg.append("text")
    	.attr("transform","translate(20,375) rotate(-90)")
    	.text("K Q3");
    
    svg.append("text")
    	.attr("transform","translate(20,510) rotate(-90)")
    	.text("K Q2");
    
    svg.append("text")
    	.attr("transform","translate(20,635) rotate(-90)")
    	.text("K Q1");
    
    svg.append("text")
    	.attr("transform","translate(115,715)")
    	.text("Par Q1");
    
    svg.append("text")
    	.attr("transform","translate(285,715)")
    	.text("Par Q2");
    
    svg.append("text")
    	.attr("transform","translate(465,715)")
    	.text("Par Q3");
    
    svg.append("text")
    	.attr("transform","translate(645,715)")
    	.text("Par Q4");
    
    svg.append("text")
    	.attr("transform","translate(825,715)")
    	.text("Par Q5");
    
    svg.append("text")
    	.attr("transform","translate(0,730)")
    	.style("font-size",15)
    	.style("stroke","#000000")
    	.text("Tier Name");
    
    var squareSide = 15;
    var topRowSquare = 735;
    var btmRowSquare = 755;
    var hTextOffset = 19;
    var vTextOffset = 12;
    var entryOffset = 165;
    //relationship between square and text is (+19,+12)
    
    //lengend
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate(0,"+topRowSquare+")")
   		.style("fill","#f70000");
    
    svg.append("text")
    	.attr("transform","translate("+hTextOffset+","+(topRowSquare + vTextOffset) +")")
   	  .style("font-size",14)
    	.text("Less than two-year sch...")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate(0,"+btmRowSquare+")")
   		.style("fill","#ff3256");
    
    svg.append("text")
    	.attr("transform","translate("+hTextOffset+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Two-year for-profit")
    
    //
    
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset+","+topRowSquare+")")
   		.style("fill","#ff3256");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset + entryOffset)+","+(topRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Two-year (public and p...)")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset+","+btmRowSquare+")")
   		.style("fill","#fff832");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset+entryOffset)+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Nonselective four-year...")
    
    //
    
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*2+","+topRowSquare+")")
   		.style("fill","#fff832");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset + entryOffset*2)+","+(topRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Four-year for-profit")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*2+","+btmRowSquare+")")
   		.style("fill","#fff832");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset+entryOffset*2)+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Nonselective four-year...")
    
    //
    
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*3+","+topRowSquare+")")
   		.style("fill","#007a0a");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset + entryOffset*3)+","+(topRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Selective private")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*3+","+btmRowSquare+")")
   		.style("fill","#007a0a");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset+entryOffset*3)+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Selective public")
    
    //
    
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*4+","+topRowSquare+")")
   		.style("fill","#19cdff");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset + entryOffset*4)+","+(topRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Highly selective private")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*4+","+btmRowSquare+")")
   		.style("fill","#19cdff");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset+entryOffset*4)+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Highly selective public")
    
    //
    
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*5+","+topRowSquare+")")
   		.style("fill","#2927aa");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset + entryOffset*5)+","+(topRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Ivy Plus")
      
    svg.append("rect")
    	.attr("width",squareSide)
    	.attr("height",squareSide)
    	.attr("transform","translate("+entryOffset*5+","+btmRowSquare+")")
   		.style("fill","#2927aa");
    
    svg.append("text")
    	.attr("transform","translate("+(hTextOffset+entryOffset*5)+","+(btmRowSquare + vTextOffset) +")")
    .style("font-size",14)
    	.text("Other elite schools")
    
    
    d3.csv("hw2data.csv", function(error, data) {
      if (error) throw error;

//grabs only the numeric vars we're plotting
      var nums = d3.keys(data[0]).filter(function(d){
        return d != "" & d != "name" & d != "tier_name" & d != "Color";
      })
      var domainByPredictor = {};
      nums.forEach(function(nums){
        domainByPredictor[nums] = d3.extent(data, function(d){
          return d[nums];
        });
      });
			//coerce
      data.forEach(function(d){
        d.k_q1 = +d.k_q1;
        d.k_q2 = +d.k_q2;
        d.k_q3 = +d.k_q3;
        d.k_q4 = +d.k_q4;
        d.k_q5 = +d.k_q5;

d.par_q1 = +d.par_q1;
        d.par_q2 = +d.par_q2;
        d.par_q3 = +d.par_q3;
        d.par_q4 = +d.par_q4;
        d.par_q5 = +d.par_q5;
      });

var kids = ["k_q1","k_q2","k_q3","k_q4","k_q5"];
      var pars = ["par_q1","par_q2","par_q3","par_q4","par_q5"];

var plotWidth = (width)/5;
 		  var plotHeight = (height)/5;
      
      var hz = [], vt = [];
      var padding = 4;

//create mapping from data to plot
      for (i = 0 ; i < 5 ; ++i ){
        hz.push(d3.scaleLinear()
                .domain(domainByPredictor[kids[i]])
                .range([margin.left + plotWidth*i,
                        margin.left + plotWidth*(i+1) - padding]));
      }
      for (i = 0 ; i < 5 ; ++i ){
        vt.push(d3.scaleLinear()
                .domain(domainByPredictor[pars[i]])
                .range([height - plotHeight*i + margin.top,
                        height - plotHeight*(i + 1) + margin.top + padding]));
      }

//draw axes
      svg.selectAll(".x.axis")
        .data(pars)
        .enter()
        .each(function(d, i) {
        svg.append("g")
          .attr("class", "axis axis--x")
          .attr("transform", "translate("+0+"," + 
                (height + margin.top) + ")")
          .call(d3.axisBottom(hz[i]).ticks(4).tickSize(-height + padding)); 
      });
      svg.selectAll(".y.axis")
        .data(pars)
        .enter()
        .each(function(d, i) {
        svg.append("g")
          .attr("class", "axis axis--y")
          .attr("transform", "translate("+margin.left+"," + 0 + ")")
          .call(d3.axisLeft(vt[i]).ticks(4).tickSize(-width + padding)); 
      });

//plot by subplot
      var cell = svg.selectAll(".cell")
      .data(cross(pars, kids))
      .enter().append("g")
      .attr("class", "cell")
      .each(plot);

//here, p contains i, j and the names of those corresp. vars x and y
      function plot(p) {
        var cell = d3.select(this);

hz[p.i].domain(domainByPredictor[p.x]);
        vt[p.j].domain(domainByPredictor[p.y]);

cell.selectAll("circle")
          .data(data)
          .enter().append("circle")
          .attr("cx", function(d) { 
          return hz[p.i](d[p.x]); 
        })
          .attr("cy", function(d) { 
          return vt[p.j](d[p.y]); 
        })
          .attr("r", 4)
          .style("fill", function(d) { return d.Color; });
      }

});
		//used to obtain desired variables for subplots
    function cross(a, b) {
      var c = [], i, j;
      for (i = -1; ++i < 5;) 
        for (j = -1; ++j < 5;) 
          c.push({x: a[i], i: i, y: b[j], j: j});
      return c;
    }
  </script>
</body>

https://d3js.org/d3.v4.min.js