Force-directed graph by mbostock, remixed with a gooey SVG filter for no good reason.
xxxxxxxxxx<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); function ticked() { 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; }); }});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