Goal Matrix

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var margin = {top: 100, right:50, bottom: 50, left: 100};
    
    var randdata = d3.range(12)
    var cartused = d3.cross(randdata,randdata)
    
    //set up a fake number of connections for each combo
    cartused.forEach(function(d){
 				var numconnections = Math.floor(Math.random()*10)
        d.values = d3.range(numconnections) 
    }) 
    
    var width = 800;
    var height = width; 
    
    var xScale = d3.scalePoint()
    	.domain(randdata)
    	.range([margin.left,width-margin.right])
    
    console.log(xScale.range())
    
     var yScale = d3.scalePoint()
    	.domain(randdata)
    	.range([margin.top,height-margin.bottom])
     
    //push to a single dataset
    var compiled = []
    
    var cnt = 0;
    
    cartused.map(function(d){
      d.values.map(function(z){	compiled.push({"forcex":xScale(d[0]),"forcey":yScale(d[1]),"value":z,"id":cnt}) 
      	cnt = cnt + 1
      
      })
     })
    
    console.log(compiled) 
    
    //run force simulation using custom X-Y forces
		var simulation = d3.forceSimulation(compiled)
            .force("x", d3.forceX(function(d){return d.forcex;}))
            .force("y", d3.forceY(function(d){return d.forcey;}))
            .force("collide", d3.forceCollide(5))		 
						.on("tick",ticked)
            ;
 
		function ticked() {		 
			d3.selectAll("circle").attr("cx", function(d) {return d.x;}).attr("cy", function(d) { return d.y; });
		;}

// Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
			.attr("transform","rotate(45)")
    	.style("margin",width/4)		//because its rotated, need to add 1/2 the width to the space it takes up. 
    
		var bubbles = svg.selectAll("circle").data(compiled)
    
    bubbles.enter().append("circle").style("fill", "red")
				.attr("r",  5)

var labels = svg.selectAll(".labelsx").data(randdata)
    
    labels.enter().append("text")
      	.style("fill", "black")
   			 .attr("class","labelsx")
    		.style("dominant-baseline","middle")
    		.style("text-anchor","middle")
		    .style("font-family","Franklin Gothic Medium")
    		.style("font-size",20)
    		.attr("x",function(d){return xScale(d)})
    		.attr("y",margin.top/2)
    		.text(function(d){return d})
    
   var labelsy = svg.selectAll(".labelsy").data(randdata)
    
    labelsy.enter().append("text")
      	.style("fill", "black")
   			 .attr("class","labelsy")
		    .style("font-family","Franklin Gothic Medium")
    		.style("font-size",20)
    		.style("dominant-baseline","middle")
    		.style("text-anchor","middle")
    		.attr("y",function(d){return yScale(d)})
    		.attr("x",margin.left/2)
    		.text(function(d){return d})
    
    
   var centerrects = svg.selectAll(".centerrects").data(randdata)
    
    centerrects.enter().append("rect")
      	.style("fill", "none")
   			 .attr("class","centerrects")
    		.style("stroke","rgba(0,0,0,.5)")
    		.attr("x",function(d){return xScale(d)-(xScale(1)-xScale(0))/2})
    		.attr("y",function(d){return yScale(d)-(xScale(1)-xScale(0))/2})
    		.attr("width",xScale(1)-xScale(0))
   			.attr("height",xScale(1)-xScale(0))
    
  </script>
</body>

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