link distance

_.md

[ Launch: link distance ] 2edcf5c359baf668d2fc by enjalot

config.json

{"description":"link distance","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"miserables.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ARhR8xT.png"}

inlet.js

// the force layout code is taken from http://bl.ocks.org/mbostock/4062045
// i removed all but 10 nodes to simplify this example
var graph = tributary.miserables;
var svg = d3.select("svg")

var color = d3.scale.category20();
var width = tributary.sw;
var height = tributary.sh;

var cellWidth = 20;
var cellHeight = 20;
maxDist = 150;
var len = graph.nodes.length;

// setting up a matrix showing the relationship between each node
var matrix = d3.range(len*len)
var rects = svg.selectAll("rect.cell")
  .data(matrix)
rects.enter()
  .append("rect").classed("cell", true)

// "legend"
var rows = svg.selectAll("circle.row")
.data(d3.range(len))
.enter()
.append("circle").classed("row",true)
.attr({
  cx: 90,
  cy: function(d,i) { return 100 + cellHeight/2 + i * cellWidth },
  r: 5,
  fill: function(d,i) { return color(i) }
})
var cols = svg.selectAll("circle.col")
.data(d3.range(len))
.enter()
.append("circle").classed("col",true)
.attr({
  cx: function(d,i) { return 100 + cellWidth/2 + i * cellWidth },
  cy: 90,
  r: 5,
  fill: function(d,i) { return color(i) }
})

//-------------------------------------------------------------------
// force code

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

force
  .nodes(graph.nodes)
  .links(graph.links)
  .start();


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

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d,i) { return color(i); })
    .call(force.drag);

node.append("title")
    .text(function(d) { return d.name; });

//-------------------------------------------------------------------
// distance code

rowIndex = function(i) {
  return Math.floor(i/len)
}
colIndex = function(i) {
  return i % len;
}
rects
  .attr({
    width: cellWidth,
    height: cellHeight,
    x: function(d,i) {
      return 100 + colIndex(i) * cellWidth
    },
    y: function(d,i) {
      return 100 + rowIndex(i) * cellHeight
    },
    'fill-opacity': 0.5,
    stroke: "#fff"//function(d,i) { return color(i%len) }
  })



var distScale = d3.scale.linear()
.domain([0, maxDist])
.range(["#56fef6", "#5619ff"])


function dist(a,b) {
  return Math.sqrt((a.x - b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y));
}


force.on("tick", function() {
  // normal force layout code
  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("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  
  rects.attr("fill", function(d,i) {
    var a = graph.nodes[colIndex(i)];
    var b = graph.nodes[rowIndex(i)];
    return distScale(dist(a,b));
  });

});

miserables.json

{
  "nodes":[
    {"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Mlle.Baptistine","group":1},
    {"name":"Mme.Magloire","group":1},
    {"name":"CountessdeLo","group":1},
    {"name":"Geborand","group":1},
    {"name":"Champtercier","group":1},
    {"name":"Cravatte","group":1},
    {"name":"Count","group":1},
    {"name":"OldMan","group":1}
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":3,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":3,"target":2,"value":6},
    {"source":4,"target":0,"value":1},
    {"source":5,"target":1,"value":1},
    {"source":6,"target":0,"value":1},
    {"source":7,"target":5,"value":1},
    {"source":8,"target":0,"value":2},
    {"source":9,"target":2,"value":1}
  
  ]
}

style.css

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

.link {
  stroke: #999;
  stroke-opacity: .6;
}