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 square root of a Tw likes</p>
<script type="application/json" id="data">
{
  "children": [
    {
      "children": [
        {
          "children": [], 
          "name": "Saudi Arabia", 
          "size": 4.0
        }
      ], 
      "name": "Canada", 
      "size": 3.0
    }, 
    {
      "children": [
        {
          "children": [], 
          "name": "Canada", 
          "size": 3.0
        }, 
        {
          "children": [
            {
              "children": [
                {
                  "children": [], 
                  "name": "England", 
                  "size": 3.0
                }
              ], 
              "name": "", 
              "size": 1.0
            }
          ], 
          "name": "", 
          "size": 1.0
        }, 
        {
          "children": [], 
          "name": "Labour Party", 
          "size": 4.0
        }, 
        {
          "children": [
            {
              "children": [
                {
                  "children": [], 
                  "name": "Scott Pruitt", 
                  "size": 7.0
                }
              ], 
              "name": "", 
              "size": 1.0
            }
          ], 
          "name": "", 
          "size": 1.0
        }, 
        {
          "children": [], 
          "name": "Britain", 
          "size": 3.0
        }, 
        {
          "children": [], 
          "name": "Germany", 
          "size": 3.0
        }, 
        {
          "children": [], 
          "name": "Jeremy Corbyn", 
          "size": 10.0
        }
      ], 
      "name": "Brexit", 
      "size": 7.0
    }, 
    {
      "children": [
        {
          "children": [], 
          "name": "Canada", 
          "size": 3.0
        }, 
        {
          "children": [], 
          "name": "Michael Capuano", 
   ...

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; });

  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 ;
    }
  }).style("fill","black");

});

d3.select(self.frameElement).style("height", radius * 2 + "px");