d3 - Hierarchical Pie

Live Demo

	Category	Cost

Usage

Below there is sample code just enough to get started with Hierarchical Pie:

<div class="chart-navigator clearfix" id="chart-navigator-1">
    <div class="btn-group" id="pie-navigator">
        <a href="#" class="btn btn-small" id="btnRoot" title="Go back to root" rel="tooltip"><i class="icon-double-angle-left"></i></a>
        <a href="#" class="btn btn-small" id="btnLevelUp" title="Go up one level" rel="tooltip"><i class="icon-angle-left"></i></a>
    </div>
    <ul class="breadcrumb"></ul>
</div>
<div class="row-fluid">
  <div class="span6">
    <div id="hierarchical-pie-demo" class="hierarchical-pie"></div>
  </div>
  <div class="span6">
    <div id="pie-chart-legend-1">
        <table class="table table-condensed table-legend">
            <thead>
                <tr>
                    <th></th>
                    <th>Category</th>
                    <th>Cost</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
  </div>
</div>
<script id="rowTemplate" type="text/template">
    <td class="color-cell">
        <span class="cat-color" style="background: {{color}};"></span>
    </td>
    <td>
    {{#isDirect}}
        <span title="Directly in this category" rel="tooltip"><i class="icon-info"></i></span>
    {{/isDirect}}
    {{category}}
    </td>
    <td class="cost">$ {{cost}}</td>
</script>

[
  {
    "id_category":"26",
    "category":"Cheeses",
    "cost":"541.11",
    "categories":[
      {
        "cost":"230.00",
        "category":"European",
        "id_category":"455"
      },
      {
        "id_category":"33",
        "category":"Australian",
        "cost":"113.90"
      }
    ]
  },
  {
    "id_category":"70",
    "category":"Breads",
    "cost":"540.99",
    "categories":[
      {
        "id_category":"71",
        "category":"Whole wheat",
        "cost":"18.26",
        "categories":[
          {
            "id_category":"49",
            "category":"Graham bread",
            "cost":"16.06"
          }
        ]
      }
    ]
  }
]

var holder = $('#hierarchical-pie-demo');
holder.empty();

$.getJSON('sample-data.json', function(data) {
  new HierarchicalPie({
    chartId : '#hierarchical-pie-demo',
    data : data,
    legendContainer : '#pie-chart-legend-1',
    navigation      : '#chart-navigator-1'
  });
});