Blocks Graph with Links

A force directed graph visualization of blocks published on bl.ocks.org. The links in the graph are derived from links from README files of blocks to other blocks. Derived from original work by Micah Stubbs found at github.com/micahstubbs/readme-vis

Each circle is a link to the block it represents on bl.ocks.org, so try clicking on the circles!

forked from curran's block: Blocks Graph

<html>
  <head>
    <title>Edge creation</title>
    <meta charset="utf-8" />
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="jsLouvain.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
    </style>
  </head>
  <body>

d3.json("readme-blocks-graph.json", function(error,data) { createNetwork(data) });

function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
      }

function createNetwork(graphContainer) {
        var nodeHash = {};
        var nodes = [];
        var edges = [];

var edgelist = graphContainer["graph"]["edges"];

edgelist.forEach(function (edge) {
          if (!nodeHash[edge.source]) {
            nodeHash[edge.source] = {id: edge.source, label: edge.source};
            nodes.push(nodeHash[edge.source]);
          }
          if (!nodeHash[edge.target]) {
            nodeHash[edge.target] = {id: edge.target, label: edge.target};
            nodes.push(nodeHash[edge.target]);
          }
          if (edge/*.weight == 5*/) {
            edges.push({id: nodeHash[edge.source].id + "-" + nodeHash[edge.target].id, source: nodeHash[edge.source], target: nodeHash[edge.target], weight: 1/*edge.weight*/});
          }
        });
        createForceNetwork(nodes, edges);
      }

var theseSourceModules = theseEdges.map(function (d) {return d.source.module}).filter(onlyUnique);
          var theseTargetModules = theseEdges.map(function (d) {return d.target.module}).filter(onlyUnique);

if (theseSourceModules.length > 1 || theseTargetModules.length > 1) {
            node.border = true;
          }
          else {
            node.border = false;
          }
        });

}

function createForceNetwork(nodes, edges) {

//create a network from an edgelist

//var colors = d3.scale.ordinal().domain([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]).range(["#996666", "#66CCCC", "#FFFF99", "#CC9999", "#666633", "#993300", "#999966", "#660000", "#996699", "#cc6633", "#ff9966", "#339999", "#6699cc", "#ffcc66", "#ff6600", "#00ccccc"]);
      var colors = d3.scale.category20();

var node_data = nodes.map(function (d) {return d.id});
      var edge_data = edges.map(function (d) {return {source: d.source.id, target: d.target.id, weight: 1}; });

console.log("node_data", node_data);
      console.log("edge_data", edge_data);

var community = jLouvain().nodes(node_data).edges(edge_data);
      var result  = community();

console.log("jLouvain result", result);

nodes.forEach(function (node) {
        node.module = result[node.id]
        //console.log("node.module", node.module)
      });

modularityCensus(nodes, edges, result);

var force = d3.layout.force().nodes(nodes).links(edges)
        .size([960, 500])
        .charge(-100)
        .chargeDistance(100)
        .linkStrength(2)
        .linkDistance(3)
        .gravity(0.07);

var edgeEnter = d3.select("svg.main").selectAll("g.edge")
        .data(edges, function (d) {return d.id})
        .enter()
        .append("g")
        .attr("class", "edge");

edgeEnter
        .append("line")
        .style("stroke-width", "1px")
        .style("stroke", "gray")
        .style("pointer-events", "none");

var nodeEnter = d3.select("svg.main").selectAll("g.node")
        .data(nodes, function (d) {return d.id})
        .enter();
        
      nodeEnter
        .append("a")
          .attr("xlink:href", function (d){
            return "https://bl.ocks.org/" + d.id;
          })
          //.attr("target", "_blank")
        .append("circle")
          .attr("r", 3)
          .attr("class", "foreground")
          .style("fill", function (d) {return colors(d.module)})
          .style("stroke-width", function (d) {return d.border ? "3px" : "1px"})

/*
        nodeEnter.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("stroke-width", "1px")
        .style("stroke-opacity", 0.75)
        .style("stroke", "white")
        .style("font-size", "8px")
        .text(function (d) {return d.id})
        .style("pointer-events", "none")

nodeEnter.append("text")
        .style("text-anchor", "middle")
        .attr("y", 3)
        .style("font-size", "8px")
        .text(function (d) {return d.id})
        .style("pointer-events", "none")
      */

//
//
        force.start();
        for(var i = 0; i < 200; i++){
          force.tick();
        }

//force.on("tick", updateNetwork);
        force.stop();
        updateNetwork();

function updateNetwork(e) {

d3.select("svg.main").selectAll("line")
            .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});

d3.select("svg.main").selectAll("circle")
            .attr("cx", function (d) {return d.x; })
            .attr("cy", function (d) {return d.y; });

}

}
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js