Colour-full force

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

<head>
  <title>Colour-full force</title>
</head>
<style>
  svg {
    background-color: black;
  }
</style>

const defs = svg.append('defs');
    const filter = defs.append('filter').attr('id', 'gooey');

filter.append('feGaussianBlur')
      .attr('in', 'SourceGraphic')
      .attr('stdDeviation', '15')
      .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 18 -10');

const simulation = d3.forceSimulation(nodes)
      .force('charge', d3.forceManyBody().strength(650))
      .force('center', d3.forceCenter(width / 2, height / 2))
      .force('collision', d3.forceCollide().radius(d => d.r))
      .on('tick', tick);

const color = d3.scaleSequential(d3.interpolateRainbow).domain([0, nodes.length]);

function tick() {
      const data = d3.select('svg')
        .selectAll('circle')
        .data(nodes);

data.enter()
        .append('circle')
        .attr('r', d => d.r)
        .merge(data)
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
        .attr('fill', (d, i) => color(i))
        .attr('stroke', 'white')
        .attr('stroke-width', '2')
        .style("filter", (d, i) => i % 2 === 0 ? "url(#gooey)" : "none");

data.exit().remove()
    }
  </script>
</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js