Maintenance Example

gistfile1.js

(function() {
  define([], function() {
    return function(){
      container = ".present[data-markdown]";
 
      var angle, arc, arcRange, color, colorScale, defs, easing, gap, height, partition, radians, radius, shapeHeight, shapeWidth, stash, svg, textPathF, transitionSpeed, tree, updateData, width;
 
      tree = {
        "name": "mn",
        "label": "Maintenance",
        "children": [
          {
            "name": "core",
            "label": "Software Maintenance",
            "children": [
              {
                "name": "defects",
                "expanded": false,
                "label": "Defect\nResolution"
              }, {
                "name": "upgrades",
                "expanded": false,
                "label": "Upgrades"
              }, {
                "name": "community-enhancements",
                "expanded": false,
                "label": "Community\nEnhancements"
              }
            ]
          }, {
            "name": "custom",
            "label": "Client Code\nMaintenance",
            "children": [
              {
                "name": "Defect",
                "label": "Post-Warrantee\nDefect Reslution",
                "expanded": false
              }, {
                "name": "enhancements",
                "label": "Enhancement\nDevelopment",
                "expanded": false
              }, {
                "name": "testing",
                "label": "Code Quality\nManagement",
                "expanded": false
              }, {
                "name": "release",
                "label": "Release\nManagement",
                "expanded": false
              }
            ]
          }, {
            "name": "services",
            "label": "Support\nServices",
            "children": [
              {
                "name": "problem",
                "expanded": false,
                "label": "Problem\nInvestigation"
              }, {
                "name": "users",
                "expanded": false,
                "label": "End User\nSupport"
              }, {
                "name": "research",
                "expanded": false,
                "label": "User Directed\nResearch"
              }
            ]
          }
        ]
      };
 
      stash = function(d) {
        d.x0 = d.x;
        d.dx0 = d.dx;
        d.y0 = d.y;
        return d.dy0 = d.dy;
      };
 
      arcRange = d3.scale.linear().domain([0, 2 * Math.PI]).range([4, 9]);
 
      colorScale = d3.scale.category10();
 
      colorScale = d3.scale.ordinal().domain([0, 2 * Math.PI]).range(["rgb(33,113,181)", "rgb(66,146,198)", "rgb(107,174,214)", "rgb(116,196,118)", "rgb(65,171,93)", "rgb(35,139,69)", "rgb(0,109,44)", "rgb(0,68,27)"]);
 
      color = function(d) {
        var cs;
        cs = colorScale(d.x);
        console.log(cs);
        return cs;
      };
 
      width = 900;
 
      height = 600;
 
      radius = 350;
 
      transitionSpeed = 500;
 
      easing = "elastic";
      var frame = d3.select(container);
      
      
      svg = frame.select("svg")
      if(svg.empty()){
        svg = d3.select(container).append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
        defs = svg.append("defs");
 
 
        partition = d3.layout.partition().sort(null).size([2 * Math.PI, radius * radius]).value(function(d) {
          return 1;
        });
 
        radians = 1.25;
 
        gap = 3;
 
        shapeHeight = 97;
 
        shapeWidth = 400;
 
        textPathF = function(d, i) {
          return d3.svg.arc().startAngle(function(d) {
            return ((d.x / radians) - (Math.PI / radians)) + (d.margin || 0.1);
          }).endAngle(function(d) {
            return ((d.x / radians) - (Math.PI / radians) + (d.dx / radians)) - (d.margin || 0.1);
          }).innerRadius(function(d) {
            return (((d.y / 500) + ((d.y + d.dy) / 500)) / 2) - 10;
          }).outerRadius(function(d) {
            return ((d.y / 500) + ((d.y + d.dy) / 500)) / 2 - 9;
          })(d, i).split("L")[0];
        };
 
        arc = d3.svg.arc().startAngle(function(d) {
          if (d.depth > 0) {
            return (d.x / radians) - (Math.PI / radians);
          } else {
            return 0;
          }
        }).endAngle(function(d) {
          if (d.depth > 0) {
            return ((d.x / radians) - (Math.PI / radians) + (d.dx / radians)) - 0.010;
          } else {
            return Math.PI * 2;
          }
        }).innerRadius(function(d) {
          if (d.depth > 0) {
            return d.y / 500 + 1.5;
          } else {
            return d.y / 500;
          }
        }).outerRadius(function(d) {
          if (d.depth > 0) {
            return (d.y + d.dy) / 500 - 1.5;
          } else {
            return (d.y + d.dy) / 500;
          }
        });
 
        angle = function(d, offset, threshold) {
          return ((d.x / radians) - (Math.PI / radians) + (d.x / radians) - (Math.PI / radians) + (d.dx / radians)) * 90 / Math.PI + offset;
        };
 
        updateData = function() {
          var path, text, textPath, tp;
          path = svg.datum(tree).selectAll(".wedge").data(partition.nodes, function(d) {
            return d.name;
          });
          path.transition().duration(transitionSpeed).ease(easing).attr("opacity", function(d) {
            if (d.hasOwnProperty("expanded") && !d.expanded) {
              return 0;
            } else {
              return 1;
            }
          }).attr("transform", function(d) {
            var c, pc;
            if (!d.expanded && d.parent && d.depth > 1) {
              c = arc.centroid(d);
              pc = arc.centroid(d.parent);
              return "translate(" + (c[0] - pc[0]) + ", " + (c[1] - pc[1]) + ") scale(1e-6)";
            } else {
              return "";
            }
          });
          path.enter().append("g").append("path").attr("class", "wedge").attr("display", function(d) {
            if (d.depth) {
              return null;
            } else {
              return "none";
            }
          }).attr("d", arc).attr("opacity", function(d) {
            return 0;
          }).style("stroke", "#fff").style("stroke-opacity", "0").style("stroke-width", "4").style("fill", function(d, i) {
            var _ref;
            if (d.depth > 1 && ((_ref = d.parent) != null ? _ref.color : void 0)) {
              return d.color = d3.rgb(d.parent.color).brighter(0.5);
            } else {
              return d.color = d3.rgb(color(d));
            }
          }).each(stash).transition().duration(transitionSpeed).ease(easing).attr("opacity", function(d) {
            if (d.hasOwnProperty("expanded") && !d.expanded) {
              return 0;
            } else {
              return 1;
            }
          }).attr("transform", function(d) {
            var c, pc;
            if (!d.expanded && d.parent && d.depth > 1) {
              c = arc.centroid(d);
              pc = arc.centroid(d.parent);
              return "translate(" + (c[0] - pc[0]) + ", " + (c[1] - pc[1]) + ") scale(0.1)";
            } else {
              return "";
            }
          }).attr("d", arc);
          path.exit().transition().duration(transitionSpeed).ease(easing).attr("d", arc).attr("opacity", 1e-6).transition().remove();
          textPath = defs.datum(tree).selectAll(".textPath").data(partition.nodes, function(d) {
            return d.name;
          });
          textPath.transition().duration(transitionSpeed).ease(easing).attr("d", function(d, i) {
            if (d.depth > 0) {
              return textPathF(d, i);
            }
          }).attr("transform", function(d) {
            var c, pc;
            if (!d.expanded && d.parent && d.depth > 1) {
              c = arc.centroid(d);
              pc = arc.centroid(d.parent);
              return "translate(" + (c[0] - pc[0]) + ", " + (c[1] - pc[1]) + ") scale(0.1)";
            } else {
              return "";
            }
          }).each(stash);
          textPath.enter().append("path").attr("class", "textPath").attr("id", function(d) {
            return "" + d.name + "-path";
          }).attr("d", function(d, i) {
            if (d.depth > 0) {
              return textPathF(d, i);
            }
          }).attr("opacity", function(d) {
            return 1;
          }).style("stroke", "#000").style("fill-opacity", 0).each(stash).transition().duration(transitionSpeed).ease(easing).attr("d", function(d, i) {
            if (d.depth > 0) {
              return textPathF(d, i);
            }
          }).attr("transform", function(d) {
            var c, pc;
            if (!d.expanded && d.parent && d.depth > 1) {
              c = arc.centroid(d);
              pc = arc.centroid(d.parent);
              return "translate(" + (c[0] - pc[0]) + ", " + (c[1] - pc[1]) + ") scale(0.1)";
            } else {
              return "";
            }
          });
          /*
            .transition()  
              .duration(transitionSpeed)
              .ease(easing)
              .attrTween("d", arcTween)
              .attr("opacity", (d)->
                  1
              )
          */
 
          textPath.exit().transition().duration(transitionSpeed).ease(easing).attr("d", arc).attr("opacity", 1e-6).transition().remove();
          text = svg.datum(tree).selectAll("text").data(partition.nodes, function(d) {
            return d.name;
          });
          tp = text.enter().append("text").attr("dx", 0).attr("dy", 0).attr("opacity", 1e-6);
          tp.append("textPath").attr("xlink:href", function(d) {
            return "#" + d.name + "-path";
          }).attr("startOffset", "50%").append("tspan").text(function(d) {
            var label;
            label = d.label || "";
            return label.split("\n")[0] || "";
          }).attr("opacity", 1e-6).attr("text-anchor", "middle").attr("dy", "-10").transition().attr("opacity", 1);
          tp.append("textPath").attr("xlink:href", function(d) {
            return "#" + d.name + "-path";
          }).attr("startOffset", "50%").append("tspan").text(function(d) {
            var label;
            label = d.label || "";
            return label.split("\n")[1] || "";
          }).attr("opacity", 1e-6).attr("text-anchor", "middle").attr("dy", "10").transition().attr("opacity", 1);
          text.attr("style", function(d) {
            var size = 11
            if(d.depth){
              size = size - d.depth
            }
            return "font-size: " + size + "px; font-weight:600;";
          }).transition().duration(transitionSpeed).ease(easing).attr("opacity", function(d) {
            if (d.hasOwnProperty("expanded") && !d.expanded) {
              return 0;
            } else {
              return 1;
            }
          });
          return text.exit().transition().attr("opacity", 1e-6).transition().remove();
        };
 
        updateData();
 
        d3.selectAll(".wedge, text").on("click", function(item) {
          var i, _i, _len, _ref;
          if (item.children) {
            _ref = item.children;
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
              i = _ref[_i];
              i.expanded = !i.expanded;
            }
          }
          return updateData();
        });
 
        frame.style("height", (height + 100) + "px");
 
        svg.attr("transform", function(d) {
          return "translate(450, 300)";
        });
 
 
      }
 
 
    };
  });
 
}).call(this);