JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<h1>How to add lines connecting the dots in a neural network-like way?</h1>

CSS

.blendCircle {
 		  mix-blend-mode: multiply;
 		}

JavaScript

// Let's create a mock visualization
var width = 300,
  height = 300;
var circleSizeMax = 15;
var rMax = Math.min(width, height) / 2 - circleSizeMax;

var radius = d3.scale.linear().range([0, rMax]);
var angle = d3.scale.linear().range([0, 2 * Math.PI]);
var size = d3.scale.linear().range([0, circleSizeMax]);
var color = d3.scale.ordinal().range(['#cccccc']);
var x = function(d) {
  return radius(d.r) * Math.cos(angle(d.angle));
};
var y = function(d) {
  return radius(d.r) * Math.sin(angle(d.angle));
};

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

var chart = svg.append('g').attr('transform', 'translate(' + [width / 2, height / 2] + ')');

var data = d3.range(150).map(function(d) {
  return {
    r: Math.random(),
    angle: Math.random(),
    size: Math.random()
  };
});

chart.selectAll('cirle')
  .data(data).enter()
  .append('circle')
  .attr('class', 'blendCircle')
  .attr({
    cx: x,
    cy: y,
    r: function(d) {
      return size(d.size);
    },
    fill: function(d, i) {
      return color(i);
    }
  });