D3 Examples - star coordinates

xxxxxxxxxx
 
<!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);
​
​
        function update(){
          circle
              // .transition()
              // .duration(100)
              .attr("cx",function(d){
                return d.x;
              })
              .attr("cy",function(d){
                                return d.y;
                            })
              .attr("r",small_circle_radius)
              .attr("fill",function(d){return color(d.lda_topic.topic_id);})
              .attr("opacity",function(d){
                                // return 0.75;
                                return d.lda_topic.topic_prob*0.95;
                            })
        }
                var node_text = svg.append("text")
                                    .attr("text-anchor","middle");
​
        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);
​
                var legend_circles = legend_group
                                                            .append("circle")
                                                            .attr("class",function(d){
                                                                return "topic-id-"+d["topic_id"];
                                                            })
                                                            .attr("r",small_circle_radius)
                                                            .attr("cx",big_circle_radius*2)
                                                            .attr("cy",function(d,i){
                                                                return i*25+small_circle_radius*2;
                                                            })
                                                            .attr("fill",function(d){
                                                                return color(d["topic_id"]);
                                                            })
                                                            .attr("opacity",0.9);
​
                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>
​
    