Pie and Donut Charts in Polycharts

[ramnathv]

As much as I hate pie charts and donut charts because a bar chart can convey the same idea more succinctly, they do have some visual appeal, and provide some piazzaz to an otherwise boring infodeck.

Here is some code showing the construction of a faceted pie chart in PolychartJS

var data = polyjs.data({
    data: [
        {grade: "Grade 9", percent: 10, completed: 'Yes'},
        {grade: "Grade 9", percent: 90, completed: 'No'},
        {grade: "Grade 10", percent: 40, completed: 'Yes'},
        {grade: "Grade 10", percent: 60, completed: 'No'},
        {grade: "Grade 11", percent: 70, completed: 'Yes'},
        {grade: "Grade 11", percent: 30, completed: 'No'},
        {grade: "Grade 12", percent: 90, completed: 'Yes'},
        {grade: "Grade 12", percent: 10, completed: 'No'}
    ],
    meta: {
      grade: { type: 'cat' },
      percent: { type: 'num' },
      completed: { type: 'cat' }
    }
});
polyjs.chart({
    title: 'Percent of Students Completing Volunteer Requirement',
    dom: 'chart',
    width: 720,
    height: 230,
    layer: {
        data: data,
        type: 'bar',
        y: 'percent',
        color: 'completed'
    },
    guides: {
        x: {position: 'none', padding: 0},
        y: {position: 'none'},
        color: {
            scale: function(value) {
                return value === 'Yes' ? '#62bf9c' : '#DDD';
            }
        }
    },
    coord: {
        type: 'polar'
    },
    facet: {
        type: 'wrap',
        'var': 'grade',
        cols: 4,
        formatter: function(index) {
            return index.grade;
        }
    }
});

[ramnathv]

The problem here is that the specification does not contain an x variable, which is troubling and inconsistent with the grammer. Ideally, it should be x: completed and y: percent, as is the case in ggplot2. I will raise this issue on the Polycharts site, but should also think of a tentative fix.