radial_dendrogram

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="viz">
      <svg style="width:800px;height:600px;" ></svg>
    </div>
    <script>
      d3.json("tweets.json", viz)

function viz(data) {

var depthScale = d3.scaleOrdinal()
          .range(["#5EAFC6", "#FE9922", "#93c464", "#75739F"]);

var nestedTweets = d3.nest()
          .key(d => d.user)
          .entries(data.tweets);

var packableTweets = {id: "All Tweets", values: nestedTweets};

var root = d3.hierarchy(packableTweets, d => d.values);

var treeChart = d3.tree();
        treeChart.size([200,200]);

var treeData = treeChart(root).descendants();

d3.select("svg")
          .append("g")
            .attr("id", "treeG")
            .attr("transform", "translate(350,250)")
          .selectAll("g")
          .data(treeData)
          .enter()
          .append("g")
            .attr("class", "node")
            .attr("transform", d => `translate(${project(d.x, d.y)})`);

d3.selectAll("g.node")
          .append("circle")
            .attr("r", 10)
            .style("fill", d => depthScale(d.depth))
            .style("stroke", "white")
            .style("stroke-width", "2px");

d3.selectAll("g.node")
          .append("text")
            .style("text-anchor", "middle")
            .style("fill", "#4f442b")
            .text(d => d.data.id || d.data.key || d.data.content);

d3.select("#treeG").selectAll("line")
          .data(treeData.filter(d => d.parent))
          .enter().insert("line","g")
            .attr("x1", d => project(d.parent.x, d.parent.y)[0])
            .attr("y1", d => project(d.parent.x, d.parent.y)[1])
            .attr("x2", d => project(d.x, d.y)[0])
            .attr("y2", d => project(d.x, d.y)[1])
            .style("stroke", "black");

function project(x, y) {
          var angle = x / 90 * Math.PI;
          var radius = y;
          return [radius * Math.cos(angle), radius * Math.sin(angle)];
        }
      }
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js