D3 Examples - paired matrix

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-scale-cluster@1.1.7/dist/d3-scale-cluster.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;font-family:Arial, sans-serif }
    rect { stroke: white; stroke-width: 4; }
    .box text { fill: white; }
  </style>
</head>
​
<body>
  <script>
    const data = [
 {
   "DisadvantageA": "Disadvantage 5",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.96
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 5",
   "percentage": 0.93
 },
 {
   "DisadvantageA": "Disadvantage 3",
   "DisadvantageB": "Disadvantage 4",
   "percentage": 0.93
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 6",
   "percentage": 0.92
 },
 {
   "DisadvantageA": "Disadvantage 6",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.9
 },
 {
   "DisadvantageA": "Disadvantage 3",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.87
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 2",
   "percentage": 0.85
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.84
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 4",
   "percentage": 0.84
 },
 {
   "DisadvantageA": "Disadvantage 5",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.78
 },
 {
   "DisadvantageA": "Disadvantage 4",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.76
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 3",
   "percentage": 0.75
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 5",
   "percentage": 0.58
 },
 {
   "DisadvantageA": "Disadvantage 4",
   "DisadvantageB": "Disadvantage 6",
   "percentage": 0.54
 },
 {
   "DisadvantageA": "Disadvantage 6",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.48
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 6",
   "percentage": 0.43
 },
 {
   "DisadvantageA": "Disadvantage 3",
   "DisadvantageB": "Disadvantage 6",
   "percentage": 0.4
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 3",
   "percentage": 0.38
 },
 {
   "DisadvantageA": "Disadvantage 4",
   "DisadvantageB": "Disadvantage 5",
   "percentage": 0.35
 },
 {
   "DisadvantageA": "Disadvantage 5",
   "DisadvantageB": "Disadvantage 6",
   "percentage": 0.34
 },
 {
   "DisadvantageA": "Disadvantage 1",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.28
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 4",
   "percentage": 0.23
 },
 {
   "DisadvantageA": "Disadvantage 3",
   "DisadvantageB": "Disadvantage 5",
   "percentage": 0.19
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.19
 },
 {
   "DisadvantageA": "Disadvantage 2",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.11
 },
 {
   "DisadvantageA": "Disadvantage 3",
   "DisadvantageB": "Disadvantage 7",
   "percentage": 0.1
 },
 {
   "DisadvantageA": "Disadvantage 7",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.06
 },
 {
   "DisadvantageA": "Disadvantage 4",
   "DisadvantageB": "Disadvantage 8",
   "percentage": 0.02
 }
];
    
    const width = 600;
    const height = width;
    const margin = {"top": 150, "left": 10, "right": 150, "bottom": 50};
    
    var positionScale = d3.scaleOrdinal();
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom);
​
    var chart = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var nestByDisadvantageA = d3.nest()
      .key(function(d){ return d.DisadvantageA; })
      .sortKeys(d3.ascending)
      .entries(data);
    
    var disadvantages = ["Disadvantage 1","Disadvantage 2","Disadvantage 3","Disadvantage 4","Disadvantage 5","Disadvantage 6","Disadvantage 7","Disadvantage 8"]
       
    var rowHeight = height/disadvantages.length;
    var columnWidth = width/disadvantages.length;
    
    var columnHeader = chart.append("g")
      .attr("transform", "translate(0,0)");
    
    /*columnHeader.append("text")
    .text("Disadvantages")
    .attr("x", width/2)
    .attr("y", -40)
    .style("text-anchor", "middle")*/
    
    var columnLabels = columnHeader.selectAll("g")
      .data(disadvantages)
      .enter()
      .append("g")
      .attr("transform", function(d, i) {return "translate(" + (columnWidth * i) +",0)"; });
    
    columnLabels.append("text")
    .text(function(d) { return d; })
    .attr("y", -10)
    .attr("transform", "translate(20)rotate(-45)")
    
    var maxPercentage = d3.max(data, function(d){ return d.percentage; });
    
    var scale = d3.scaleSqrt()
    .domain([0,maxPercentage])
    .range([0,rowHeight]);
    
    var colour = d3.scaleLinear().domain([0,1])
  .interpolate(d3.interpolateHcl)
  .range(["#efD4e5", "#bf1c7d"]);
    
    nestByDisadvantageA.forEach(function(d, i) {
      
      var rowG = chart.append("g")
      .attr("transform", "translate(0," + (i * rowHeight) + ")");
      
      rowG.append("text")
      .text(d.key)
      .attr("x", width + 10)
      .attr("y", 10/2 + 6)
      .style("text-anchor", "start");
      
      rowG.append("rect")
      .attr("x", columnWidth * disadvantages.indexOf(d.key))
      .attr("y", 0)
      .attr("width", columnWidth)
      .attr("height", rowHeight)
      .style("fill", "LightGrey")
      .attr("rx", 5);
           
      var boxes =  rowG.selectAll("g")
      .data(d.values)
      .enter()
      .append("g")
      .attr("class", "box")
      .attr("transform", function(d, i) {return "translate(" + (columnWidth * disadvantages.indexOf(d.DisadvantageB)) +",0)"; });
      
      boxes.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", columnWidth)
      .attr("height", rowHeight)
      .style("fill", function(d){ return colour(d.percentage); })
      .attr("rx", 5);
      
      boxes.append("text")
      .text(function(d){ return formatPercentage(d.percentage) })
      .attr("x", columnWidth/2)
      .attr("y", rowHeight/2 + 6)
      .style("text-anchor", "middle");
      
    })
    
    var disadvantage8 = "Disadvantage 8";
    var i8 = disadvantages.indexOf(disadvantage8)
    
    var disadvantage8Row = chart.append("g").attr("transform", "translate(0," + (i8 * rowHeight) + ")");
      
      disadvantage8Row.append("text")
      .text("Disadvantage 8")
      .attr("x", width + 10)
      .attr("y", 10/2 + 6)
      .style("text-anchor", "start");
      
      disadvantage8Row.append("rect")
      .attr("x", columnWidth * i8)
      .attr("y", 0)
      .attr("width", columnWidth)
      .attr("height", rowHeight)
      .style("fill", "LightGrey")
      .attr("rx", 5);
    
    
    function formatPercentage(n) {
      return Math.round(n * 100);
    }
​
  </script>
</body>
​
    