Old school D3 from simpler times

All examples By author By category About

emeeks

Full window Github gist

Ch. 5, Fig. 17 - D3.js in Action

This is the code for Chapter 5, Figure 17 from D3.js in Action that shows how to use d3.svg.diagonal.radial() and its .projection() function to create circular dendrograms. This also implements d3.behavior.zoom() so that you can pan the canvas by dragging.

<html>
<head>
  <title>D3 in Action Chapter 5 - Example 8</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  
</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
    d3.json("tweets.json",function(error,data) {dataViz(data.tweets)});

function dataViz(incData) {

nestedTweets = d3.nest()
      .key(function (el) {return el.user})
      .entries(incData);

packableTweets = {id: "root", values: nestedTweets}

var depthScale = d3.scale.category10([0,1,2]);

treeChart = d3.layout.tree();
      treeChart.size([200,200])
      .children(function(d) {return d.values});

var linkGenerator = d3.svg.diagonal.radial()
      .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
  
      d3.select("svg")
      .append("g")
      .attr("class", "treeG")
      .selectAll("g")
      .data(treeChart(packableTweets))
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      
      d3.selectAll("g.node")
      .append("circle")
      .attr("r", 10)
      .style("fill", function(d) {return depthScale(d.depth)})
      .style("stroke", "white")
      .style("stroke-width", "2px");
      
      d3.selectAll("g.node")
      .append("text")
      .text(function(d) {return d.id || d.key || d.content})
      
      d3.select("g.treeG").selectAll("path")
      .data(treeChart.links(treeChart(packableTweets)))
      .enter().insert("path","g")
      .attr("d", linkGenerator)
      .style("fill", "none")
      .style("stroke", "black")
      .style("stroke-width", "2px");
      
      treeZoom = d3.behavior.zoom();
      treeZoom.on("zoom", zoomed);
      d3.select("svg").call(treeZoom)
      
      function zoomed() {
        var zoomTranslate = treeZoom.translate();
        d3.select("g.treeG").attr("transform", "translate("+zoomTranslate[0]+","+zoomTranslate[1]+")")
      }
    }
</script>
  </footer>

</html>

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