Dependito

by chicagogrooves

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
    <div class="stats" style="display:none">
      <div class="chart graph1">
      </div>
    </div>
    <div class="graph">
      <div class="control-zoom">
          <a class="control-zoom-in" href="#" title="Zoom in"></a>
          <a class="control-zoom-out" href="#" title="Zoom out"></a>
        </div>
    </div>

CSS

body {
    background: #fff;
    padding:0;
    margin:0;
    font-family:helvetica,arial;
    overflow: hidden;
  }

  .graph {
    width:100%;
    height: 100%;
    fill: #000;
    overflow: hidden;
    position: relative;
  }

  svg {
    height: 100%;
    width: 100%;
  }

  g.dimmed  {
    stroke-opacity: 0.05;
  }

  g.dimmed text.shadow {
    stroke-opacity: 0;
  }

  circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
  }

  text {
    font: 10px sans-serif;
    pointer-events: none;
  }

  text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
  }

  path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
  }

  path.link.licensing {
    stroke: green;
  }

  path.link.resolved {
    stroke-dasharray: 0,2 1;
  }


  .control-zoom {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.25);
    padding: 5px;
    border-radius: 7px;
    z-index: 100;
  }

  .control-zoom a {
    background: rgba(255, 255, 255, 0.75);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    width: 19px;
    height: 19px;
    border-radius: 4px;
  }

  .control-zoom a:last-child {
    margin: 0;
  }

  .control-zoom a:hover {
    background-color: white;
  }

  .control-zoom > .control-zoom-in {
    background-image:...

JavaScript

graphData = {"directed":true,"multigraph":false,"graph":[],"nodes":[{"id":"A"},{"id":"B"}],"links":[{"source":0,"target":1}]};
      getGraphData = function() { return graphData;};

  var r = 10;
  var graph, layout, zoom, nodes, links, data;
  var linkedByIndex = {};
  var graphWidth, graphHeight;
  window.graph = graph;
  var lineCurvatureFactor = 0.5;

  // Helpers
  function formatClassName(prefix, object) {
    return prefix + '-' + object.id.replace(/(\.|\/)/gi, '-');
  }

  function findElementByNode(prefix, node) {
    var selector = '.'+formatClassName(prefix, node);
    return graph.select(selector);
  }

  function isConnected(a, b) {
    return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
  }

  function fadeRelatedNodes(d, opacity, nodes, links) {

    // Clean
    $('path.link').removeAttr('data-show');

    nodes.style("stroke-opacity", function(o) {

      if (isConnected(d, o)) {
        thisOpacity = 1;
      } else {
        thisOpacity = opacity;
      }

      this.setAttribute('fill-opacity', thisOpacity);
      this.setAttribute('stroke-opacity', thisOpacity);

      if(thisOpacity == 1) {
        this.classList.remove('dimmed');
      } else {
        this.classList.add('dimmed');
      }

      return thisOpacity;
    });

    links.style("stroke-opacity", function(o) {

      if (o.source === d) {

        // Highlight target/sources of the link
        var elmNodes = graph.selectAll('.'+formatClassName('node', o.target));
        elmNodes.attr('fill-opacity', 1);
        elmNodes.attr('stroke-opacity', 1);

        elmNodes.classed('dimmed', false);

        // Highlight arrows
        var elmCurrentLink = $('path.link[data-source=' + o.source.index + ']');
        elmCurrentLink.attr('data-show', true);
        elmCurrentLink.attr('marker-end', 'url(#regular)');

        return 1;

      } else {

        var elmAllLinks = $('path.link:not([data-show])');

        if(opacity ==...