Heatmap of Force-Directed Graph Node Positions

A simple heatmap of node positions over the course of a force-directed layout algorithm. Click and drag nodes to see the heatmap update.

Forked from Mike Bostock's force-directed layout example.

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

svg, canvas {
  position: absolute;
  left: 0;
  top: 0;
}

svg {
  background: #fff;
  border: 1px solid #ddd;
}

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

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

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    scale = 0.3;

var gridSize = 10;

// Keeps a count of how many nodes have been in each cell during a "tick"
var grid = d3.range(0, height/gridSize).map(function() {
  return d3.range(0, width/gridSize).map(function() { return 0 });
});

var color = d3.scale.category20();
var outterScale = d3.scale.pow()
    .exponent(0.4)
    .domain([0,1])
    .range([0,1]);
var heatmapColor = d3.scale.linear()
    .clamp(true)
    .domain([0, 0.1111111111111111, 0.2222222222222222, 0.3333333333333333, 0.4444444444444444, 0.5555555555555555, 0.6666666666666666, 0.7777777777777777, 0.8888888888888888, 1])
    .range(['#ffffff','#fff7f3','#fde0dd','#fcc5c0','#fa9fb5',
      '#f768a1','#dd3497','#ae017e','#7a0177','#49006a']);

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

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var svg = d3.select("body").append("svg")
    .attr("width", scale * width)
    .attr("height", scale * height)
    .append("g")
    .attr("transform", "scale(" + scale + ", " + scale + ")");

var context = canvas.node().getContext("2d");

d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

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", 8)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

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

force.on("tick", function() {
    link.attr("x1", function(d) { d.source.x = boundedCoords(d.source.x, width); return d.source.x; })
        .attr("y1", function(d) { d.source.y = boundedCoords(d.source.y, height); return d.source.y; })
        .attr("x2", function(d) { d.target.x = boundedCoords(d.target.x, width); return d.target.x; })
        .attr("y2", function(d) { d.target.y = boundedCoords(d.target.y, height); return d.target.y; });

node.attr("cx", function(d) { d.x = boundedCoords(d.x, width); return d.x; })
        .attr("cy", function(d) { d.y = boundedCoords(d.y, height); return d.y; });

// Increment the counts
    node.each(function(d) {
      var row = Math.min(Math.floor(d.y/gridSize), grid.length - 1);
      var col = Math.min(Math.floor(d.x/gridSize), grid[0].length - 1);
      grid[row][col] += 1;
    });

// Max cell value, for normalizing
    var gridMax = d3.max(grid, function(row) {
      return d3.max(row);
    });

// Draw the grid
    context.clearRect(0, 0, width, height);
    grid.forEach(function(row, i) {
      row.forEach(function(cell, j) {
        context.beginPath();
        context.fillStyle = heatmapColor(outterScale(cell/gridMax));
        context.rect(j*gridSize, i*gridSize, gridSize, gridSize);
        context.fill();
        context.closePath();
      });
    });
  });
});

function boundedCoords(pos, maxPos) {
  return Math.min(maxPos, Math.max(0, pos));
}

</script>

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