Force directed layout of d3's dependencies

deps4d3.ndjson

{"name":"d3","dependencies":[{"name":"d3-zoom","href":"/package/d3-zoom"},{"name":"d3-voronoi","href":"/package/d3-voronoi"},{"name":"d3-transition","href":"/package/d3-transition"},{"name":"d3-timer","href":"/package/d3-timer"},{"name":"d3-time-format","href":"/package/d3-time-format"},{"name":"d3-time","href":"/package/d3-time"},{"name":"d3-shape","href":"/package/d3-shape"},{"name":"d3-selection","href":"/package/d3-selection"},{"name":"d3-scale","href":"/package/d3-scale"},{"name":"d3-request","href":"/package/d3-request"},{"name":"d3-random","href":"/package/d3-random"},{"name":"d3-queue","href":"/package/d3-queue"},{"name":"d3-quadtree","href":"/package/d3-quadtree"},{"name":"d3-polygon","href":"/package/d3-polygon"},{"name":"d3-path","href":"/package/d3-path"},{"name":"d3-interpolate","href":"/package/d3-interpolate"},{"name":"d3-hierarchy","href":"/package/d3-hierarchy"},{"name":"d3-geo","href":"/package/d3-geo"},{"name":"d3-format","href":"/package/d3-format"},{"name":"d3-force","href":"/package/d3-force"},{"name":"d3-ease","href":"/package/d3-ease"},{"name":"d3-dsv","href":"/package/d3-dsv"},{"name":"d3-drag","href":"/package/d3-drag"},{"name":"d3-dispatch","href":"/package/d3-dispatch"},{"name":"d3-color","href":"/package/d3-color"},{"name":"d3-collection","href":"/package/d3-collection"},{"name":"d3-chord","href":"/package/d3-chord"},{"name":"d3-brush","href":"/package/d3-brush"},{"name":"d3-axis","href":"/package/d3-axis"},{"name":"d3-array","href":"/package/d3-array"}],"level":1}
{"name":"d3-random","dependencies":[],"level":2}
{"name":"d3-polygon","dependencies":[],"level":2}
{"name":"d3-brush","dependencies":[{"name":"d3-transition","href":"/package/d3-transition"},{"name":"d3-selection","href":"/package/d3-selection"},{"name":"d3-interpolate","href":"/package/d3-interpolate"},{"name":"d3-drag","href":"/package/d3-drag"},{"name":"d3-dispatch","href":"/package/d3-dispatch"}],"level":2}
{"name":"d3-drag","dependencies":[{"name":"d3-selection","href":"/package/d3-selection"},{"name":"d3-dispatch","href":"/package/d3-dispatch"}],"level":2}
{"name":"d3-collection","dependencies":[],"level":2}
{"name":"d3-array","dependencies":[],"level":2}
{"name":"d3-selection","dependencies":[],"level":2}
{"name":"d3-zoom","dependencies":[{"name":"d3-transition","href":"/package/d3-transition"},{"name":"d3-selection","href":"/package/d3-selection"},{"name":"d3-interpolate","href":"/package/d3-interpolate"},{"name":"d3-drag","href":"/package/d3-drag"},{"name":"d3-dispatch","href":"/package/d3-dispatch"}],"level":2}
{"name":"d3-dispatch","dependencies":[],"level":2}
{"name":"d3-queue","dependencies":[],"level":2}
{"name":"d3-dsv","dependencies":[{"name":"rw","href":"/package/rw"},{"name":"iconv-lite","href":"/package/iconv-lite"},{"name":"commander","href":"/package/commander"}],"level":2}
{"name":"d3-time-format","dependencies":[{"name":"d3-time","href":"/package/d3-time"}],"level":2}
{"name":"d3-time","dependencies":[],"level":2}
{"name":"d3-hierarchy","dependencies":[],"level":2}
{"name":"d3-quadtree","dependencies":[],"level":2}
{"name":"d3-axis","dependencies":[],"level":2}
{"name":"d3-voronoi","dependencies":[],"level":2}
{"name":"d3-ease","dependencies":[],"level":2}
{"name":"d3-timer","dependencies":[],"level":2}
{"name":"d3-request","dependencies":[{"name":"xmlhttprequest","href":"/package/xmlhttprequest"},{"name":"d3-dsv","href":"/package/d3-dsv"},{"name":"d3-dispatch","href":"/package/d3-dispatch"},{"name":"d3-collection","href":"/package/d3-collection"}],"level":2}
{"name":"d3-format","dependencies":[],"level":2}
{"name":"d3-transition","dependencies":[{"name":"d3-timer","href":"/package/d3-timer"},{"name":"d3-selection","href":"/package/d3-selection"},{"name":"d3-interpolate","href":"/package/d3-interpolate"},{"name":"d3-ease","href":"/package/d3-ease"},{"name":"d3-dispatch","href":"/package/d3-dispatch"},{"name":"d3-color","href":"/package/d3-color"}],"level":2}
{"name":"d3-chord","dependencies":[{"name":"d3-path","href":"/package/d3-path"},{"name":"d3-array","href":"/package/d3-array"}],"level":2}
{"name":"d3-interpolate","dependencies":[{"name":"d3-color","href":"/package/d3-color"}],"level":2}
{"name":"d3-geo","dependencies":[{"name":"d3-array","href":"/package/d3-array"}],"level":2}
{"name":"d3-path","dependencies":[],"level":2}
{"name":"d3-color","dependencies":[],"level":2}
{"name":"d3-force","dependencies":[{"name":"d3-timer","href":"/package/d3-timer"},{"name":"d3-quadtree","href":"/package/d3-quadtree"},{"name":"d3-dispatch","href":"/package/d3-dispatch"},{"name":"d3-collection","href":"/package/d3-collection"}],"level":2}
{"name":"d3-scale","dependencies":[{"name":"d3-time-format","href":"/package/d3-time-format"},{"name":"d3-time","href":"/package/d3-time"},{"name":"d3-interpolate","href":"/package/d3-interpolate"},{"name":"d3-format","href":"/package/d3-format"},{"name":"d3-color","href":"/package/d3-color"},{"name":"d3-collection","href":"/package/d3-collection"},{"name":"d3-array","href":"/package/d3-array"}],"level":2}
{"name":"d3-shape","dependencies":[{"name":"d3-path","href":"/package/d3-path"}],"level":2}
{"name":"commander","dependencies":[{"name":"graceful-readlink","href":"/package/graceful-readlink"}],"level":3}
{"name":"rw","dependencies":[],"level":3}
{"name":"iconv-lite","dependencies":[],"level":3}
{"name":"xmlhttprequest","dependencies":[],"level":3}
{"name":"graceful-readlink","dependencies":[],"level":4}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

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

</style>
</head>


<body>
  <script src="https://d3js.org/d3.v4.js"></script>

  <svg width="960" height="600"></svg>


<script src="main.js"></script>

</body>
</html>

main.js

// we need to load our json of dependencies
// a nice simple d3 v4 force thing example http://bl.ocks.org/mbostock/4062045
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

radius = 10;
var color = d3.scaleOrdinal(d3.schemeCategory20);



var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
  //    console.log('linky id', d)
      return d.id;

  })
  //.distance(distance)
  .strength(.4)
)
  .force("charge", d3.forceManyBody().strength(-98))
  .force("center", d3.forceCenter(width / 2, height / 2));


d3.request('./deps4d3.ndjson', function(d){
//  console.log(d.responseText.split('\n'))
  var deparray = d.responseText.split('\n');

  var graph = {
    nodes:[],
    links:[]
  };
  //console.log(deparray)

  deparray.forEach(function(e){
    if(e.length > 0){
    console.log(e)
    var eobj = JSON.parse(e);
    graph.nodes.push({id: eobj.name, group: eobj.level})
    var edep = eobj.dependencies;
              // dependencies   dependencies

//    console.log(edep)

    edep.forEach(function(o){
  //    console.log(o.name)
      var olev = eobj.level + 1;
      graph.links.push({ source: eobj.name, target: o.name, value: olev })


    })

  }

  })

  console.log(graph)



  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

    var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")

    node.append('circle')
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

    node.append("title").text(function(d) {
console.log('making title', d)
      return d.id + ", level:"  + d.group; });

    node.append("text")
          .attr("dx", 12)
          .attr("dy", ".35em")
          .text(function(d) {
    //        console.log('title should be', d)
            return d.id
          });

    simulation.nodes(graph.nodes)
          .on("tick", ticked);


    simulation.force("link")
            .links(graph.links);


    function ticked() {
      node.attr("cx", function(d) {
      //  console.log("in ticked cx", d)
          return d.x = Math.max(radius, Math.min(width - radius, d.x));
        })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

        link
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      }
// this here ends the data thing
});


function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

thumbnail.png