matrix component

Working towards a reusable matrix component to help illustrate linear algebra concepts.

try scrubbing the numbers on each matrix, notice that the colored cells correspond to each other in the 3x3.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    
    .number {
      cursor: col-resize;
    }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    d3.layout.matrix = matrixLayout;
    d3.svg.matrix = matrixComponent;
    
    twobytwo = [ 
      [2, -3],
      [-3, 1]
    ];
    // our data is a list of rows, which matches the numeric.js format
    threebythree = [ 
      [1, 2, 3],
      [0, 0, 0],
      [3, 1, 2]
    ]
    // we want to link cells to the same value
    threemapping = [
      ["a", "b", "c"],
      [ 0, 0, 0],
      ["c", "a", "b"]
    ]
    // cell size
    var size = 30;
    
    var svg = d3.select("svg");
    
    // create a container to hold our first matrix
    var twog = svg.append("g")
      .attr("transform", "translate(100, 100)")

// instantiate our layout
    var twom = new d3.svg.matrix()
      .data(twobytwo) // pass in our matrix data
      .margin([15, 15])
      .cellWidth(size)
      .cellHeight(size)
      .update(twog) //render the matrix into our group
    
    var threeg = svg.append("g")
      .attr("transform", "translate(243, 86)")
    
    // TODO: structure the component so it doesn't need to use "new"
    var threem = new d3.svg.matrix()
      .data(threebythree)
      .mapping(threemapping) // we can define links between cells
      .margin([10, 10])
      .cellWidth(size+10)
      .cellHeight(size)
      .update(threeg)
    
    // listen for changes to the data (due to scrubbing)
    threem.on("change", function(d, oldData) {
      console.log("matrix changed", d, d.data, oldData);
    })
    
    var color = d3.scale.category10();
    
    threeg.selectAll("rect.bg").style({
      //fill: "#ccfee9",
      fill: function(d) {
        var m = threemapping[d.i][d.j];
        if(m)
        	return d3.hsl(color(m)).brighter(1.6)
      },
      rx: 4,
      ry: 4
    })
    
		function matrixComponent() {
      var g;
      var data = [[]];
      var mapping = [[]];
      var nodes = [];
      var layout = d3.layout.matrix();
      var margin = layout.margin();
      var cellWidth = layout.cellWidth();
      var cellHeight = layout.cellHeight();
      /*
      TODO
        make scrubbing configurable, per-cell
      */
      var dispatch = d3.dispatch("change")
      
      this.update = function(group) {
        if(group) g = group;
        nodes = layout.nodes(data);
        
        var line = d3.svg.line()
        .x(function(d) { return d[0] })
        .y(function(d) { return d[1] })
        
        var brackets = g.selectAll("path.brackets")
        .data([1, -1])
        brackets.enter().append("path")
        .attr("d", function(d) {
          var nRows = data.length;
          var x0 = d * cellWidth/4;
          var x1 = -margin[0]/2;
          var y0 = -margin[1]/2;
          var y1 = (cellHeight + margin[1]) * nRows - margin[1]/2
          if(d === 1) {
            return line([
              [x0, y0],
              [x1, y0], 
              [x1, y1], 
              [x0, y1]
            ])
          } else {
            var dx = (cellWidth + margin[0]) * data[0].length - margin[0]/2
            x0 -= margin[0]/2
            return line([
              [x0 + dx, y0],
              [dx, y0], 
              [dx, y1], 
              [x0 + dx, y1]
            ])
          }
        }).attr({
          stroke: "#111",
          fill: "none"
        })
        
        var cells = g.selectAll("g.number").data(nodes)
        var enter = cells.enter().append("g").classed("number", true)
        
        enter.append("rect").classed("bg", true)
        cells.select("rect.bg")
        .attr({
          width: cellWidth,
          height: cellHeight,
          x: function(d) { return d.x },
          y: function(d) { return d.y },
          fill: "#fff"
        })
        enter.append("text")
        cells.select("text").attr({
          x: function(d) { return d.x + cellWidth/2 },
          y: function(d) { return d.y + cellHeight/2 },
          "alignment-baseline": "middle",
          "text-anchor": "middle",
          "line-height": cellHeight,
          "fill": "#091242"
        }).text(function(d) { return d.data })
        
        var step = 0.1;
        var that = this;
        var drag = d3.behavior.drag()
        .on("drag", function(d) {
          var oldData = d.data;
          var val = d.data + d3.event.dx * step
          val = +(Math.round(val*10)/10).toFixed(1)
          set(val, d.i, d.j);
          //data[d.i][d.j] = val;
          that.update()
          dispatch.change(d, oldData)
        })
        cells.call(drag)
        
        return this;
      }
      
      function set(val, i, j) {
        var m = mapping[i][j];
        if(m){
          mapping.forEach(function(row, mi) {
            row.forEach(function(col, mj) {
              if(col === m) {
                data[mi][mj] = val;
              }
            })
          })
        }
        data[i][j] = val;
      }
      this.mapping = function(val) {
        if(val) {
          // TODO make sure dims match
          mapping = val;
          return this;
        }
        return mapping;
      }
      
      this.data = function(val) {
        if(val) {
          data = val;
          nodes = layout.nodes(data);
          return this;
        }
        return data;
      }
      
      this.margin = function(val) {
        if(val) {
          margin = val;
          layout.margin(margin);
          return this;
        }
        return margin;
      }
      
      this.cellWidth = function(val) {
        if(val) {
          cellWidth = val;
          layout.cellWidth(cellWidth);
          return this;
        }
        return cellWidth;
      }
      this.cellHeight = function(val) {
        if(val) {
          cellHeight = val;
          layout.cellHeight(cellHeight);
          return this;
        }
        return cellHeight;
      }
      
      d3.rebind(this, dispatch, "on")
      return this;
      
    }
    
    function matrixLayout() {
      /*
        We accept our matrix data as a list of rows:
        [ [a, b],
          [c, d] ]
      */
      var data = [[]];
      var nodes;
      var margin = [0, 0];
      var cellWidth = 20;
      var cellHeight = 20;
      var nRows;
      
      function getX(i) {
        return i * (cellWidth + margin[0])
      }
      function getY(j) {
        return j * (cellHeight + margin[1])
      }
        
      function newNodes() {
        nRows = data.length;
        nodes = [];
        data.forEach(function(rows,i) {
          rows.forEach(function(col, j) {
            var node = {
              x: getX(j),
              y: getY(i),
              data: col,
              i: i,
              j: j,
              index: i * nRows + j
            }
            nodes.push(node);
          })
        })
      }

this.nodes = function(val) {
        if(val) {
          this.data(val);
        }
        return nodes;
      }
       
      this.data = function(val) {
        if(val) {
          if(val.length === data.length && val[0].length === data[0].length) {
            // if the same size matrix is being updated, 
            // just update the values by reference
            // the positions shouldn't change
            data = val;            
            calculate();
          } else {
            data = val;
            newNodes();
          }
          nRows = data.length;
          return this;
        }
        return data;
      }
      
      this.margin = function(val) {
        if(val) {
          margin = val;
          calculate();
          return this;
        }
        return margin;
      }
      
      this.cellWidth = function(val) {
        if(val) {
          cellWidth = val;
          calculate();
          return this;
        }
        return cellWidth;
      }
      this.cellHeight = function(val) {
        if(val) {
          cellHeight = val
          calculate();
          return this;
        }
        return cellHeight;
      }
      
      return this;
    }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js