D3 Components

Pie Chart

<div id="pie-chart-default"></div>
<div id="pie-chart-donut"></div>

<script>
  d3.json('../data/browser-usage-share.json', function (data) {
    d3.pieChart(data, { id: 'pie-chart-default' });
  });
  d3.json('../data/browser-usage-share.json', function (data) {
    d3.shuffle(data);
    d3.pieChart(data, {
      id: 'pie-chart-donut',
      sort: 'descending(percentage)',
      arcs: {
        donutRatio: 0.5,
        stroke: '#fff'
      },
      labels: {
        show: true
      },
      legend: {
        display: 'inline-block',
        columns: 2,
        symbol: {
          shape: 'icon',
          width: '1em',
          height: '1em'
        }
      }
    });
  });
</script>