D3 Multilevel piechart - run it on http://jsfiddle.net/gh/gist/library/pure/5f414efae7aea556658a5d8f90fefaae/

fiddle.css

.tooltip {
  background: #eee;
  box-shadow: 0 0 5px #999999;
  color: #333;
  display: none;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 80px;
  z-index: 10;
}

fiddle.js

var data = [
  {label:'Category A', value:20, color: 'red', sub: [{label: 'velke hovno', value: 10, color: 'darkred'}, {label: 'hovno', value: 5, color: 'salmon'}]},
  {label:'Category B', value:50, color: 'blue'},
  {label:'Category C', value:30, color: 'green'},
];

var w = 400;
var h = 400;
var r = h/2;
var subOuterRadius = r * 0.75;

var pieChart = d3.select('#chart');

var svg = pieChart
  .append('svg:svg')
  .data([data])
  .attr('width', w)
  .attr('height', h)
  .append('svg:g')
  .attr('transform', 'translate(' + r + ',' + r + ')');

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

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = svg.selectAll('g.slice')
  .data(pie)
  .enter()
  .append('svg:g')
  .attr('class', 'slice');

arcs.append('svg:path')
  .attr('fill', function(d){return d.data.color;})
  .attr('d', function (d) {return arc(d);})
  .attr('stroke-width', 5)
  .attr('stroke', 'white')
;

arcs.append('svg:g').attr('path', function(d) {

  var subData = d.data.sub ? d.data.sub : [];

  let startAngle = d.startAngle;
  let endAngle = d.endAngle;
  let value = d.value;

  let innerStartAngle = d.startAngle;
  var path = d3.select(this).selectAll('path')
    .data(subData)
    .enter()
    .append('path')
    .attr('class', 'sub')
    .attr('d', function (d, i) {
      var innerEndAngle = innerStartAngle + ((endAngle - startAngle) * d.value / value );

      var innerArc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(subOuterRadius)
        .startAngle(innerStartAngle)
        .endAngle(innerEndAngle);

      innerStartAngle = innerEndAngle;
      return innerArc();
    }).attr('fill', function(d){return d.color;});
});

// Tooltips
var tooltip = pieChart
  .append('div')
  .attr('class', 'tooltip');

tooltip.append('div')
  .attr('class', 'label');

tooltip.append('div')
  .attr('class', 'count');


arcs.on('mouseover', function(d) {
  tooltip.select('.label').html(d.data.label);
  tooltip.select('.count').html(d.data.value);
  tooltip.style('display', 'block');
});

arcs.on('mouseout', function() {
  tooltip.style('display', 'none');
});

arcs.on('mousemove', function(d) {
  tooltip.style('top', (d3.event.layerY + 10) + 'px')
    .style('left', (d3.event.layerX + 10) + 'px');
});

arcs.selectAll('.sub').on('mouseover', function(d) {
  tooltip.select('.label').html(d.label);
  tooltip.select('.count').html(d.value);
  tooltip.style('display', 'block');
  d3.event.stopPropagation();
});

fiddle.manifest

# based on http://zeroviscosity.com/d3-js-step-by-step/step-0-intro
name: D3 Multilevel piechart
description: Change data in var data
authors:
  - Frantisek Kocun
resources:
- http://some.url.com/some/file.js
- http://other.url.com/other_filename.css
normalize_css: no
wrap: b
panel_js: 1
panel_css: 1

index.html

<div id='chart'></div>