Radial Dendrogram

by b_g_v

HTML

<p>Clusters min freq. 50</p>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="application/json" id="data">
{
  "children": [
    {
      "children": [
        {
          "children": [
            {
              "children": [
                {
                  "children": [], 
                  "name": "中小企業", 
                  "size": 27
                }
              ], 
              "name": "", 
              "size": 1
            }
          ], 
          "name": "", 
          "size": 1
        }, 
        {
          "children": [], 
          "name": "事業所", 
          "size": 17
        }, 
        {
          "children": [
            {
              "children": [
                {
                  "children": [], 
                  "name": "大阪府泉佐野市", 
                  "size": 9
                }
              ], 
              "name": "", 
              "size": 1
            }
          ], 
          "name": "", 
          "size": 1
        }, 
        {
          "children": [], 
          "name": "発表会", 
          "size": 10
        }, 
        {
          "children": [], 
          "name": "酒気帯び運転", 
          "size": 20
        }, 
        {
          "children": [], 
          "name": "千葉県", 
          "size": 12
        }, 
        {
          "children": [], 
          "name": "酒気帯び", 
          "size": 23
        }, 
        {
          "children": [], 
          "name": "幹事長", 
          "size": 16
        }, 
        {
          "children": [
            {
              "children": [
                {
                  "children": [], 
                  "name": "委員会", 
                  "size": 49
                }
              ], 
              "name": "", 
              "size": 1
            }
          ], 
          "name": "", 
          "size": 1
        }, 
        {
          "children": [
            {
              "children": [
                {
                 ...

CSS

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
  text-anchor: middle;
}

JavaScript

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

var svg = d3.select("svg"),
    diameter = + svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(2,2)"),
    format = d3.format(",d");

var pack = d3.pack()
    .size([diameter - 4, diameter - 4]);

  root = d3.hierarchy(graph)
      .sum(function(d) { return d.size; })
      .sort(function(a, b) { return b.value - a.value; });

  var node = g.selectAll(".node")
    .data(pack(root).descendants())
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.data.name + ": " + format(d.value); });

  node.append("circle")
      .attr("r", function(d) { return d.r; });

  node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) { return d.data.name.substring(0, d.r / 3); });