D3 Examples - d3 API functions

d3 API functions

Each category is a subjective labeling of the various API functions in d3 version 3. The numbers that drive the treemap are counts of API funcions in each category. This is a little like using lines of code as a metric as a higher count doesn't necessarily mean more important, but it does give a relative sense for the distribution of functionality in d3.

This makes it easy to see the logic in splitting d3 up into smaller modules for version 4.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%}
    
    text {
      font-family: Arial;
      font-size: 10px;
      fill: #212026;
     
    }
  </style>
</head>
​
​
<body>
  <svg></svg>
​
  <script>
    d3.json("api.json", function(err, api) {
​
      var w = 960;
      var h = 500;
​
      
      //counting functions under each API section
      //this is not quite comprehensive because I arbitrarily removed some
      //functions that would add clutter, and didn't include sub functions
      var nested = d3.nest()
      .key(function(d) { return d.type})
      .rollup(function(d) { return d.length })
      .map(api)
      
      var groups = Object.keys(nested);
      
      var color = d3.scale.category20c()
      .domain(groups);
      
      var prepTypes = groups.map(function(t) {
        return {
          type: t,
          children: [{value: nested[t]}]
        }
      })
​
​
      var typeObj = {type:"API", children:prepTypes};
​
      var treemap = d3.layout.treemap()
      .size([w,h])
      .sort(function(a,b) { return a.value - b.value })
      .value(function(d) { return d.value })
      var nodes = treemap.nodes(typeObj)
​
      var svg = d3.select("svg");
      var gs = svg.selectAll("g.cell")
      .data(nodes)
      .enter()
      .append("g").classed("cell",true);
      gs.append("rect")
      .attr({
        x: function(d) { return d.x },
        y: function(d) { return d.y },
        width: function(d) { return d.dx },
        height: function(d) { return d.dy}
      })
      .style({
        opacity: function(d) { return !!d.parent },
        fill: function(d) { if(d.parent) return color(d.parent.type) }
      })
​
      svg.selectAll("text.cell")
      .data(nodes).enter()
      .append("text")
      .text(function(d) { if(d.parent && d.parent.type != "API") return d.parent.type })
      .attr({
        x: function(d) { return d.x + 10 },
        y: function(d) { return d.y - 10 },
        transform: function(d) {
          return "rotate(90," + [d.x, d.y]+")"
        }
      })
​
    });
​
  </script>
</body>
​
​
​
    