Contents

function(data) {
  var margin     = { top: 20, right: 20, bottom: 10, left: 10 },
      width      = 400,
      height     = 400,
      svgWidth   = width + margin.right + margin.left,
      svgHeight  = height + margin.top + margin.bottom,
      radius     = Math.min(width, height) / 2;

  var svg = d3.select("body").append("svg")             
             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
             .attr("width", svgWidth)
             .attr("height", svgHeight)
             .style("font-family", "Arial")
             .style("font-size", "14px")
             .style("fill", "none")
             .style("background-color", "#ffffff")
            .append('g')
              .attr('transform', 'translate(' +(width/2)+ ',' +(height/2)+ ')')
              .style("fill", "none");

  var color = d3.scale
                .ordinal()
                .range(["#428bca", "#5cb85c", "#5bc0de", "#f0ad4e", "#d9534f"]);

  var arc = d3.svg.arc()
              .outerRadius(radius - 10)
              .innerRadius(radius - 70);

  var pie = d3.layout.pie()
              .sort(null)
              .value(function(d) { return d.value; });

  var arcElement = svg.selectAll(".arc")
                      .data(pie(data))
                   .enter().append("g")
                      .attr("class", "arc");

  arcElement.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color(d.data.name); });

  arcElement.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("dy", "5px")
            .style('fill', '#FFFFFF')
            .style('font-weight', 'bold')
            .style("text-anchor", "middle")
            .text(function(d) { return d.data.name; });
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
grapht-0.1.9	lib/graph-definitions/donut.js