docs: function() {
  
              var self = this;
  
              // get ready the svg.
              self.svg = d3.select('#' + self.attrId).append("svg")
                  // using the generic rule for the id.
                  .attr("id", self.getGenericId('svg'))
                  //.attr("width", margin.left + margin.right)
                  .attr('width', self.options.diameter)
                  //.attr("height", margin.top + margin.bottom)
                  .attr('height', self.options.diameter)
                .append("g")
                  .attr("transform", 
                         "translate(" + self.options.diameter/ 2 + 
                         "," + self.options.diameter/ 2 + ")");
  
              // get ready the partition.
              self.partition = d3.layout.partition()
                  .sort(function(a, b) {
                    return d3.ascending(a.size, b.size);
                  })
                  .size([2 * Math.PI, self.options.diameter / 2]);
  
              // set the data.
              var root = self.jsonData;
  
              // Compute the initial layout on the entire tree to 
              // sum sizes.
              // Also compute the full name and fill color 
              // for each node,
              // and stash the children so they can be 
              // restored as we descend.
              self.partition
                  .value(function(d) { return d.size; })
                  .nodes(root)
                  .forEach(function(d) {
                    d._children = d.children;
                    d.sum = d.value;
                    d.key = self.key(d);
                    d.fill = self.fill(d);
                  });
              //console.log(root);
              // after comupte, the root value will be the total value.
              self.totalValue = root.value;
              // update the explanation div.
              $('#' + self.getGenericId('date'))
                  .text(self.options.date);
              $('#' + self.getGenericId('pageviews'))
                  .text(self.formatNumber(self.totalValue));
  
              // Now redefine the value function to use 
              // the previously-computed sum.
              self.partition
                  .children(function(d, depth) { 
                      return depth < 2 ? d._children : null;
                  })
                  .value(function(d) { return d.sum; });
  
              // draw the center circle and hook the zoom out event.
              self.center = self.svg.append("circle")
                  .attr("r", self.options.diameter / 6)
                  //.on("click", zoomOut);
                  .on("click", function(d, i) {
                      self.zoomOut(d);
                  });
              // add the title for tooltip.
              self.center.append("title")
                  //.text(function(d) {
                  //    return d.name + "\n" + formatNumber(d.value);
                  //});
                  .text("zoom out");
  
              // manipulate the path.
              self.path = self.svg.selectAll("path")
                  .data(self.partition.nodes(root).slice(1))
                .enter().append("path")
                  .attr("d", self.arc)
                  .style("fill", function(d) { 
                      //console.log(d.fill);
                      return d.fill; 
                  })
                  .each(function(d) { 
                      this._current = self.updateArc(d); 
                  })
                  //.on("click", zoomIn);
                  .on("click", function(d, i) {
                      self.zoomIn(d);
                  });
              // add the tooltip
              self.path.append("title")
                  .text(function(d) {
                      return d.name + "\n" + 
                         self.formatNumber(d.value) + 
                         " Pageviews\n" +
                         self.formatPercentage(d.value / self.totalValue) + 
                         " of total pageviews";
                  });
          }