VP sunburst

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": "vp",
        "label": "Vendor Portal",
        "children": [
          {
            "name": "onboarding",
            "label": "Onboarding",
            "children": [
              {
                "name": "info-mgmt",
                "expanded": false,
                "label": "Enrollment"
              }, {
                "name": "diversity",
                "expanded": false,
                "label": "Diversity"
              }
            ]
          }, {
            "name": "invoicing",
            "label": "Invoicing",
            "children": [
              {
                "name": "web-invoice",
                "label": "Web\nInvoice",
                "expanded": false
              }, {
                "name": "invoice-upload",
                "label": "Invoice\nUpload",
                "expanded": false
              }
            ]
          }, {
            "name": "inquiry",
            "label": "Inquiry",
            "children": [
              {
                "name": "quick-search",
                "expanded": false,
                "label": "Quick\nSearch"
              }, {
                "name": "advanced-search",
                "expanded": false,
                "label": "Advanced\nSearch"
              }
            ]
          }, {
            "name": "case-management",
            "label": "Collaboration",
            "children": [
              {
                "name": "submission",
                "label": "Case\nSubmission",
                "expanded": false
              }, {
                "name": "mangement",
                "label": "Case\nMangement",
                "expanded": false
              }
            ]
          }, {
            "name": "dynamic-discounting",
            "label": "Dynamic\nDiscounting",
            "children": [
              {
                "name": "traditional",
                "label": "Traditional",
                "expanded": false
              }, {
                "name": "kinetic-pay",
                "label": "KineticPay",
                "expanded": false
              }
            ]
          }
        ]
      };

      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 = 500;

      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) {
            return "font-size: 10px; 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();
        });

        d3.select(self.frameElement).style("height", height + "px");

        svg.attr("transform", function(d) {
          return "translate(450, 300)";
        });


      }


    };
  });
 
}).call(this);