Web Tutorial: D3 Pie Chart (Part 4/4)

The first thing we'll do here is remove the red lines and the background colors.

div {outline: 0px solid #FF0000;}

.pieChartSvg
{
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgba(200, 100, 100, 0);
}

.pieChartSvg text
{
    fill: rgba(255, 255, 0, 1);
    text-anchor: middle;
    font-weight: bold;
}

.pieLegendSvg
{
    width: 40%;
    height: 100%;
    float: right;
    background-color: rgba(100, 200, 100, 0);
}

Yep, nice and clean now.

Let's add a nice deep red outline to the legend.

.pieLegendSvg
{
    width: 40%;
    height: 100%;
    float: right;
    background-color: rgba(100, 200, 100, 0);
    outline: 1px solid rgba(200, 0, 0, 1);
}

W0oT!

And then let's animate this guy...

First, before creating arc, let's create zeroArc. It's basically doing the same thing with the d3 object's arc() method, but with a much smaller outer radius.

var data = pie(dataSet.stats);

var zeroArc =
d3.arc()
.innerRadius(0)
.outerRadius(this.dataWidth);

var arc =
d3.arc()
.innerRadius(0)
.outerRadius((this.dataWidth / 2) * config.scale);

Now add a transition() method and a duration() method (with an interval of your choosing). The d attribute will still be set by arc after the transition.

chart
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", arc)
.attr("fill", function(d) {
    return d.data.color;
})
.transition()
.duration(500)
.attr("d", arc);

But before the transition, it will be set by zeroArc!

chart
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", zeroArc)
.attr("fill", function(d) {
    return d.data.color;
})
.transition()
.duration(500)
.attr("d", arc);

Now you see, when I change the year to 2018, the pie grows from small to large! Incidentally, the pie now shows that Sadio Mané scored the bulk of Liverpool's goals in 2018. What a dude.

Things get even more interesting when you go for a donut chart...

var arc =
d3.arc()
.innerRadius(this.dataWidth * 2)
.outerRadius((this.dataWidth / 2) * config.scale);

Slow the transition so you can see clearer.

chart
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", zeroArc)
.attr("fill", function(d) {
    return d.data.color;
})
.transition()
.duration(5000)
.attr("d", arc);

Beautiful!

Check out the live sample!

This web tutorial sure didn't take long. D3 simplifies a lot of stuff, but I guess developers only really truly appreciate that when they've had to go through the hassle of setting it up manually by HTML, CSS and vanilla JavaScript.

Pie for now!
T___T