title: Show dependencies between data (mapping / matrix)
body: <p>I want to show dependencies between data, but I do not know how the data is stored best and retrieved best? </p>
  
  <p>I have this data dependencies: </p>
  
  <pre><code>  | 1 | 2 | 3 | 4 | 7
  ----------------------
  a | x | x | x | x | 
  ----------------------
  b | x |   |   | x |
  ----------------------
  c |   |   |   | x | x
  </code></pre>
  
  <p>which i mapped in javascript like below. Not sure if there is a better construct for that? </p>
  
  <pre><code>var a = [1, 2, 3, 4,]; 
  var b = [1, 4]; 
  var c = [4, 7]; 
  var A = ["a", "b", "c"]; 
  </code></pre>
  
  <p>What I want to show is:  </p>
  
  <ul>
  <li>If I click on "a", it tells me "a" is connected to "1,2,3,4"  </li>
  <li>If I click on "1", it tells me "1" is connected to "a, b"</li>
  </ul>
  
  <h3>My current approach (see as well <a href="http://jsfiddle.net/wujood/vjesobym/" rel="nofollow">fiddle</a>):</h3>
  
  <p>
  
      </p>
  
  <pre><code>&lt;title&gt;TestDependencies&lt;/title&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
  
  var a = [1, 2, 3, 4,]; 
  var b = [1, 4]; 
  var c = [4, 7]; 
  var A = ["a", "b", "c"]; 
  
  function select(y) {
  A.forEach(function(entry) {
  // console.log(entry);
  document.write(entry + ":" + eval(entry) + "&lt;br&gt;"); 
  
  });
  y.forEach(function(entry) {
  document.write(entry); 
  }); 
  // document.write(y);     
  }
  
  function selectX(x) {
      var match = [];
  
      A.forEach(function(entry) {
      // console.log(entry);
      // document.write(entry + ":" + eval(entry) + "&lt;br&gt;"); 
      // console.log( x + " in " + entry );
      // console.log( eval( entry ) );
      var found = eval( entry ).indexOf( x );
      if ( found &gt; -1 ) { 
          match.push( entry );
      }
  });
  
  console.log( x + " is connected to " + match);
  
  }
  
  function selectY(y) {
  //document.write(y); 
      y.forEach(function(entry) {
          var link = '&lt;a href="javascript:selectX(' + entry + ');"&gt;' + entry + '&lt;/a&gt;'; 
          document.write(link + ", "); 
      }); 
  }
  
  function selectA(  ) { 
      A.forEach(function(entry) {
          var link = '&lt;a href="javascript:selectB(' + entry + ', \'' + entry + '\');"&gt;' + entry + '&lt;/a&gt;'; 
          document.write(link + ", "); 
      }); 
  }
  
  function selectB( x, y ) { 
      console.log( y + " is connected to " + x )
  }
  
  
  selectY(a); 
  selectY(b); 
  selectY(c); 
  selectA(  );
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  
  </p>