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>
var height = 400;
    var width = 800;
    var radius = (200)-30;
    var origin_x = width/2;
    var origin_y = radius+40;
		var small_circle_radius = 4;
		var big_circle_radius = 8;
    var svg = d3.select("#star-coordinate").append("svg")
      .attr("width", width)
      .attr("height", height);

var color = d3.scaleOrdinal(d3.schemeCategory20);

d3.json("single_topical_view.json",function(err,topic_data){
      if (err){
        throw err;
      }

var lda_topics_id = topic_data["lda_topic_ids"];

var data = topic_data["lda_topics"];

var axis ={};

lda_topics_id.forEach(function(d,i){
        axis[d]={
          				"x":radius*Math.sin(Math.PI*2*i/lda_topics_id.length),
                	"y":-radius*Math.cos(Math.PI*2*i/lda_topics_id.length)

}
      })

data.forEach(function(d,i){
        var x = d3.sum(d["lda_topics"],function(el){
          return el.topic_prob*axis[el.topic_id]["x"];}) + origin_x;

var y = d3.sum(d["lda_topics"],function(el){
          return el.topic_prob*axis[el.topic_id]["y"];
        }) + origin_y;

data[i]["x"] = x;
        data[i]["y"] = y;

});

var circle = svg.append("g")
                          .selectAll("circle.node")
                          .data(data)
                          .enter()
                          .append("circle")
													.attr("class",function(d){return "topic-id-"+d.lda_topic.topic_id})
                          .classed("node",true);

var simulation = d3.forceSimulation(data)
                              .velocityDecay(0.2)
                              .force("x", d3.forceX(function(d) { return d.x; }))
                              .force("y", d3.forceY(function(d) { return d.y; }))
                              // .force("center", d3.forceCenter(origin_x,origin_y))
                              .force("collide", d3.forceCollide(small_circle_radius));
        simulation.on("tick",update);
        // var origin = svg.append("circle")
        //                 .attr("cx",origin_x)
        //                 .attr("cy", origin_y)
        //                 .attr("r",small_circle_radius+1);

circle.on("mouseover",function(d){
					var selected_nodes = d3.selectAll(".topic-id-"+d.lda_topic.topic_id);
					selected_nodes.transition().duration(750).ease(d3.easeElastic).attr("r",big_circle_radius);
					var mouse_pos = d3.mouse(this);
					node_text.text(d.title).attr("x",mouse_pos[0]).attr("y",mouse_pos[1]-20);

})

circle.on("mouseout",function(d){
					var selected_nodes = d3.selectAll(".topic-id-"+d.lda_topic.topic_id);
					selected_nodes.transition().attr("r",small_circle_radius);
					node_text.text("");
				})

var legend_group = d3.select("#star-coordinate")
															 .append("svg")
															 .attr("width",1000)
															 .attr("height",topic_data["top_tfidf_tokens"].length*20+30)
															 .selectAll("g.legend")
															 .data(topic_data["top_tfidf_tokens"].filter(function(el){
																 return el["word_scores"].length;}))
															 .enter()
															 .append("g")
															 .classed("legend",true);

legend_circles.on("mouseover",function(d){
					var selected_nodes = d3.selectAll(".topic-id-"+d.topic_id);
					selected_nodes.transition().duration(750).ease(d3.easeElastic).attr("r",big_circle_radius);
				})
				legend_circles.on("mouseout",function(d){
					var selected_nodes = d3.selectAll(".topic-id-"+d.topic_id);
					selected_nodes.transition().attr("r",small_circle_radius);
				})
				var legend_texts = legend_group
														.append("text").text(function(d){
															if(d){

return d["word_scores"].map(function(el){return " "+el["word"]; });
															}
															})
														.attr("y",function(d,i){
															return i*25+small_circle_radius*3.5;
														})
														.attr("x",big_circle_radius*2+10)
    })
  </script>
</body>

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