Radial Dendrogram

by b_g_v

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<p>Full size content-type, min frequency 50, max 2 words distance, with intermediate nodes, value is pop-word frequency</p>
<script type="application/json" id="data">
{"color":"blue","children":[{"color":"blue","children":[{"color":"blue","children":[],"name":"Борис Дубровский","size":44}],"name":"Роскомнадзор Вадим Ампелонский","size":39},{"color":"blue","children":[{"color":"blue","children":[],"name":"Государственный Департамент","size":30},{"color":"blue","children":[],"name":"Совет Федерации","size":57}],"name":"Владимир Путин","size":37},{"color":"blue","children":[{"color":"blue","children":[],"name":"Денис Мантуров","size":44}],"name":"Валерия Леонтьева","size":32},{"color":"blue","children":[{"color":"blue","children":[],"name":"Липецких","size":26},{"color":"blue","children":[],"name":"Александра Кокорина Кирилл","size":79},{"color":"blue","children":[],"name":"Андрей Аршавин","size":49},{"color":"blue","children":[],"name":"Москва","size":50},{"color":"blue","children":[],"name":"Росгосцирка Дмитрий Иванов","size":89},{"color":"blue","children":[],"name":"Владимир Путин","size":37},{"color":"blue","children":[],"name":"Минобороны","size":20},{"color":"blue","children":[],"name":"Ольга Бузова","size":19},{"color":"blue","children":[],"name":"ТАСС","size":20},{"color":"blue","children":[],"name":"Арктика","size":25},{"color":"blue","children":[],"name":"Совет Федерации","size":57},{"color":"blue","children":[],"name":"СКР","size":19},{"color":"blue","children":[],"name":"МИД","size":20},{"color":"blue","children":[],"name":"Валерия Леонтьева","size":32},{"color":"blue","children":[],"name":"ФСБ","size":19},{"color":"blue","children":[],"name":"Госдума Вячеслав Володин","size":72},{"color":"blue","children":[],"name":"Валентин Петренко","size":30},{"color":"blue","children":[],"name":"Ирина...

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var radius = 650, pradius = 1;

var data = document.getElementById('data').innerHTML,
    json = JSON.parse(data);

var cluster = d3.layout.cluster()
    .size([360, radius - 120]);

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

var svg = d3.select("body").append("svg")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

  var nodes = cluster.nodes(json);

  var link = svg.selectAll("path.link")
      .data(cluster.links(nodes))
      .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var node = svg.selectAll("g.node")
      .data(nodes)
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  node.append("circle")
      .attr("r", function(d) { return d.size; /*return d.size > 1 ? d.size * 10 : 1;*/ });

  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });

node.on("mouseover", function(p) {
  //color the links
  link.filter(function(d) {
    for (d = d.source; d; d = d.parent) {
      if (d === p) return true;

      }
  }).style("stroke","red");

  //color the nodes 
  node.filter(function(d) {
    while(d = d.parent){
      if(d === p) return true ;
    }
  }).style("fill","red");
});

node.on("mouseout", function(p) {
  //color the links
  link.filter(function(d) {
    for (d = d.source; d; d = d.parent) {
      if (d === p) return true;

      }
  }).style("stroke","#ccc");

  //color the nodes 
  node.filter(function(d) {
    while(d = d.parent){
      if(d === p) return true ;
    }
 ...