star-coordinates

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

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
		
		var height = 500;
    var width = 960;
    var radius = width/2;
    var origin_x = height/2;
    var origin_y = width/2;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
		var dispatch = d3.dispatch("load_topics_id")
    
    d3.json("hdp_topics_id.json",function(err,hdp_topics_id){
      if (err){
        throw err;
      }
    	
      
    d3.json("hdp_topics.json",function(err,data){
      if (err){
        throw err;
      }
      	
      	var axis ={};
      	hdp_topics_id.forEach(function(d,i){
          axis[d]={
            				"x":radius*Math.sin(Math.PI*2*i/hdp_topics_id.length),
                  	"y":radius*Math.cos(Math.PI*2*i/hdp_topics_id.length)
          				}
        })
 
				data.forEach(function(d,i){
          var x = d3.sum(d["hdp_topics"],function(el){
            if(axis[el.topic_id]){
              	return el.topic_prob*axis[el.topic_id]["x"];
            }else
              {
                console.log("SomEthing horrible happened. Call the cops")
              }
 					           
          }) + origin_x;
          
          var y = d3.sum(d["hdp_topics"],function(el){
            return el.topic_prob*axis[el.topic_id]["y"];
          }) + origin_y;
          
          data[i]["x"] = x;
          data[i]["y"] = y;
       		
          console.log("ok");
          });
      	
      	
      	
      });
      
    })
      
    
  </script>
</body>

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