sparse matrix zoo II

This version may break your browser because of the crazy amount of cells I'm rendering with SVG. I just wanted to see what the matrices looked like.

I believe I'm also doing something slightly wrong, I'm populating the off-diagonal values as if they are symmetric. I believe some of these matrices are not symemetric so it doesn't always render. This is mostly just to see what it might look like. The matrix could probably be efficiently rendered with canvas or even webgl.

I saw this list of sparse matrices and thought they could be thrown right into a d3 force layout.

I made a small script to process and host the "MM" formatted matrices to a d3 friendly JSON format.

I'd like to add more matrices from the list, and try to adapt this to webgl.

Built with blockbuilder.org

forked from enjalot's block: sparse matrix zoo: canvas

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="matrix.js"></script>
  <style>
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
      background-color: #111;
      overflow: scroll;
    }
    svg.force { 
      width: 480px; height: 100%;
      position:absolute;
      left: 0px
    }
    svg.matrix {
      height: 100%;
      left: 500px;
      top: 40px; 
      position: absolute;
    }
    canvas { 
      position:absolute;
    }
    line {
      pointer-events: none;
    }
    #matrices {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  </style>
</head>

<body>

<canvas></canvas>
  <svg class="force"></svg>
  <svg class="matrix"></svg>
  <select id="matrices"></select>
  <script>
    
    var width = 960/2;
    var height = window.innerHeight || 500;
    
    var canvas = d3.select("canvas").node();
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.globalCompositeOperation = "lighter";
    
    var color = "#8effe8";
    var mcolor = d3.scale.linear()
    .range(["#232323", color])
    
    d3.json("https://enjalot.github.io/sparse-matrix-zoo/json/list.json", function(err, matrices) {
    
    var startingIndex = 2;
    var select = d3.select("#matrices")
    select.selectAll("option")
      .data(matrices)
      .enter().append("option")
      .text(function(d) { return d.name })
      .filter(function(d,i) { return i == startingIndex })
      .attr("selected", true)
    
    select.on("change", function() {
      var i = this.selectedIndex;
      render(matrices[i].url);
    })
    
    render(matrices[startingIndex].url)
    
    var force;
    function render(url) {
      //var url = "https://enjalot.github.io/sparse-matrix-zoo/json/can_61.json";
      d3.json(url, function(err, data) {

console.log(data);

var numNodes = d3.max([+data.meta.rows, +data.meta.cols]);
        console.log("numNodes", numNodes);

var nodes = d3.range(numNodes).map(function(d) { return {i: d, value: 0}});
        var links = []
        data.data.forEach(function(d) {
          if(d.source !== d.target) {
            // the matrix is 1-indexed
            links.push(d)
          } else {

nodes[d.source].value = d.value
          }
        })
        console.log("nodes", nodes)
        console.log("links",links)

var linkExtent = d3.extent(links, function(d) { return d.value })
        var linkScale = d3.scale.sqrt()
        .domain(linkExtent)
        .range([1, 10])
        
        var nodeExtent = d3.extent(nodes, function(d) { return d.value })
        var nodeScale = d3.scale.sqrt()
        .domain(nodeExtent)
        .range([3, 8])
        
        var colorExtent = d3.extent(linkExtent.concat(nodeExtent).concat([0]))
        mcolor.domain(colorExtent)

delete force;
        force = d3.layout.force()
          .charge(-180)
          .linkDistance(40)
          .friction(0.8)
          .gravity(0.2)
          //.linkStrength(0.9)
        .linkStrength(function(d) { return linkScale(d.value)/10 })
          .size([width, height]);

force
          .nodes(nodes)
          .links(links)
          .start();

function draw() {
          ctx.clearRect(0, 0, width, height);
          ctx.strokeStyle = "rgba(142, 255, 232, 0.2)";
          ctx.lineCap = "round";
          links.forEach(function(l) {
            ctx.beginPath();
            ctx.lineWidth = linkScale(l.value);
            ctx.moveTo(l.source.x, l.source.y);
            ctx.lineTo(l.target.x, l.target.y);
            ctx.stroke();
          })
        }

var svg = d3.select("svg.force");

var node = svg.selectAll(".node")
            .data(nodes)
        node.exit().remove();
        node
          .enter().append("circle")
            .attr("class", "node")
            .style("fill", function(d) { return color })
        node
        //.attr("r", 5)
          .attr("r", function(d) { return nodeScale(d.value) })
          .call(force.drag);

force.on("tick", function() {
          draw();
         node.attr("cx", function(d) { return d.x; })
              .attr("cy", function(d) { return d.y; });
        });
        
        var size = 4;
        var margin = [1, 1];
        var msvg = d3.select("svg.matrix")
        // make sure the matrix fits in the svg
        .style("width", +data.meta.cols * (size + margin[0]) + 100)

matrix.update(msvg) // render the matrix

msvg.selectAll("rect.bg")
        .style({
          fill: function(d) {
            return mcolor(d.data);
          }
        })
        .on("click", function(d) {
          console.log(d);
        })
      })
    }
      
    })
  </script>
</body>

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