Gooey Force-Directed Graph in D3

Force-directed graph by mbostock, remixed with a gooey SVG filter for no good reason.

forked from donmccurdy's block: Gooey Force-Directed Graph in D3

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var d3 = window.d3;

var svg = d3.select('svg'),
    width = +svg.attr('width'),
    height = +svg.attr('height');

var simulation = d3.forceSimulation()
    .force('link', d3.forceLink().id(function(d) { return d.id; }))
    .force('charge', d3.forceManyBody())
    .force('center', d3.forceCenter(width / 2, height * 1.12 / 2));

/*******************************************************************************
 * Color Palette
 * Source: https://github.com/Jam3/nice-color-palettes
 */

var color = d3.scaleOrdinal([
  '#e8ddcb',
  '#033649',
  '#036564',
  '#031634',
  '#547980',
  '#45ada8',
  '#9de0ad',
  '#e5fcc2'
]);

/******************************************************************************
 * Gooey Filter
 * Source: https://bl.ocks.org/nbremer/3da658e9a21cd3c71d0819f9698f3bfa
 */

var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
      filter.append('feGaussianBlur')
        .attr('in','SourceGraphic')
        .attr('stdDeviation','12')
        //to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
        .attr('color-interpolation-filters','sRGB')
        .attr('result','blur');
      filter.append('feColorMatrix')
        .attr('in','blur')
        .attr('mode','matrix')
        .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
        .attr('result','gooey');

/******************************************************************************
 * Force-directed Graph
 * Source: https://bl.ocks.org/mbostock/4062045
 */

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

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')
      .style('filter', 'url(#gooeyCodeFilter)')
    .selectAll('circle')
    .data(graph.nodes)
    .enter().append('circle')
      .attr('r', 20)
      .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) { return d.id; });

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

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

node
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; });
  }
});

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;
}

</script>

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