Pie & Donut Charts

View full screen.

Pie charts are useful for performing relative comparisons: how do the parts make up the whole? A more legible alternative is the donut chart, as shown here. Mouseover to compare the two chart designs.

Both pie and donut charts are made using wedges, which can also be used to make other sorts of visualizations, as we saw in the sunburst, Burtin’s antibiotics and PolarClock examples.

Note that we sort the data in descending order, so that by convention the largest wedge starts at 12 o’clock.

Next: Line & Step Charts

Source

<html>
  <head>
    <title>Pie</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="pie.js"></script>
    <style type="text/css">

#fig {
  width: 400px;
  height: 400px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

/* Sizing and scales. */
var w = 400,
    h = 400,
    r = w / 2,
    a = pv.Scale.linear(0, pv.sum(data)).range(0, 2 * Math.PI);

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h);

/* The wedge, with centered label. */
vis.add(pv.Wedge)
    .data(data.sort(pv.reverseOrder))
    .bottom(w / 2)
    .left(w / 2)
    .innerRadius(r - 40)
    .outerRadius(r)
    .angle(a)
    .event("mouseover", function() this.innerRadius(0))
    .event("mouseout", function() this.innerRadius(r - 40))
  .anchor("center").add(pv.Label)
    .visible(function(d) d > .15)
    .textAngle(0)
    .text(function(d) d.toFixed(2));

vis.render();

    </script>
  </div></div></body>
</html>

Data

var data = pv.range(10).map(Math.random);