mixed multimodal random 2d

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/d3-random.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    circle {
      fill: red;
    }
  </style>
</head>

<body>
  <script>
    
    var randA = d3.randomNormal(75, 15);
    var randB = d3.randomNormal(25, 15);
    var randC = d3.randomNormal(50, 15);
    
   	var a = Array.apply(null, new Array(10000));
    a = a.map(() => { 
      return {
        x: Math.random() > 0.5 ? randA() : randB(),
        y: randC(),
      }; 
    });
    
    var scale = d3.scale.linear()
    	.domain([0,100]).range([100,500]);
   
    var svg = d3.select("body").append("svg")
      .attr("width", 700)
      .attr("height", 700)

svg.selectAll('circle')
    	.data(a)
    	.enter()
        .append('circle')
        .attr({
          cx: function(d) { return scale(d.x); },
      		cy: function(d) { return scale(d.y); },
      		r: 1,
    	});

</script>
</body>

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

https://d3js.org/d3-random.v1.min.js