function draw(articleElement, data) {
    var w = 876,  // width
        h = 200,  // height
        r = 200,  // radius
        ir = 2,   // inner radius
        pi = Math.PI,
        root = articleElement.select('.position-pie'),
        color = d3.scale.ordinal()
                   .domain([1,2,3,4,5])
                   .range(['#fff', '#b8bfcc', '#858fa3', '#606b82', '#455068']);

    var svg = root.select("svg")
            .datum(data)
            .attr("width", w)
            .attr("height", h);

    var vis = svg.append("g")
            .attr("transform", "translate(" + r + "," + r + ")");

    var arc = d3.svg.arc()
            .outerRadius(r)
	    .innerRadius(ir);

    var pie = d3.layout.pie()
            .value(function(d, i) { return i !== (data.length - 1) ? 1e-6 : 100; }) // pre-animation
            .sort(function (d, i) { return i; })
            .startAngle(-90 * (pi/180))
            .endAngle(90 * (pi/180));

    var outline = vis.selectAll('path')
            .data(pie)
            .enter()
            .append('path')
            .attr('class', 'outline')
            .attr('d', arc);

    var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");

    var path = arcs.append("path")
            .attr("d", arc)
            .attr('fill', '#eeeeee')
            .each(function (d) { this._current = d; });

    var groups = articleElement.select('.groups').selectAll('span')
            .data(data)
            .enter()
            .append('span')
            .style('opacity', 0)
            .text(function (d, i) { return d.party_slugs.join(' · '); });

    var didAnimate = false;

    function animate() {
        if (didAnimate) {
            return;
        }

        pie.value(function (d) { return d.percentage; });

        path = path.data(pie);
        path.transition()
            .duration(1000)
            .attrTween('d', arcTween)
            .attr("fill", function(d, i) { return color(data.length - i); } );

        groups.transition()
          .duration(1000)
          .style('opacity', 1);

        didAnimate = true;
    }

    function arcTween(d) {
        var i = d3.interpolate(this._current, d);
        this._current = i(0);
        return function (t) { return arc(i(t)); };
    }

    $(articleElement[0][0]).waypoint(animate, {offset: '25%'});
}

window.onload = function () {
    d3.selectAll('article').each(function () {
        var current = d3.select(this),
            data = JSON.parse(current.attr('data-positions'));

        draw(current, data);
    });
};