title: What is the best way to visualize a self-similarity matrix
body: <p>I have a string array that holds over 150 elements. I am trying to visualize a self-occurance matrix in a manner similar to <a href="https://colinmorris.github.io/SongSim/#/" rel="nofollow noreferrer">this</a>. However, when I try to run the code, the load time is incredibly long. </p>
  
  <p>I am using d3.js to visualize, and it's during the rendering process that most of the delay exists. </p>
  
  <p>The matrix variable that I use in is an array of Link objects that have an x, y, id, weight property.</p>
  
  <pre class="lang-js prettyprint-override"><code>let words: string[] = data.lyrics.replace(/[.,\/#!$%\^&amp;\*;:{}=\-_`~()]/g, "").replace(/\s{2,}/g, " ").split(" ");
  let words_map: Map &lt; string, number &gt; = new Map();
  
  let matrix: Array &lt; Link &gt; = new Array();
  for (let i = 0; i &lt; words.length; i++) {
      for (let j = 0; j &lt; words.length; j++) {
          let link: Link = {
              id: "(" + words[i] + " " + i.toString() + ", " + words[j] + " " + j.toString() + ")",
              x: i.toString(),
              y: j.toString(),
              weight: "0"
          }
          if (words[i].toUpperCase() === words[j].toUpperCase()) {
              if (words_map.has(words[i])) {
                  words_map.set(words[i], words_map.get(lyrics[i]) + 1);
              } else {
                  words_map.set(lyrics[i], 2)
              }
              link.weight = words_map.get(lyrics[i]).toString();
          }
          matrix.push(link);
      }
  }
  
  d3.select("svg")
      .append("g")
      .attr("id", "adjacencyG")
      .selectAll("rect")
      .data(matrix)
      .enter()
      .append("rect")
      .attr("width", 3)
      .attr("height", 3)
      .attr("x", function(d) {
          return parseInt(d.x) * 3
      })
      .attr("y", function(d) {
          return parseInt(d.y) * 3
      })
      .style("stroke", "black")
      .style("stroke-width", "1px")
      .style("fill", "red")
      .style("fill-opacity", function(d) {
          return parseInt(d.weight) * .2
      })
  </code></pre>
  
  <p>The runtime from the code above as I've pasted for an input array of 220 items takes 8 seconds to graph. With the code given is there any thing I can do to speed the rendering process up?</p>