in harness/app-assets/templates/assets/js/bootstraps/football.js [10:102]
function footballChart(homeTeam, awayTeam) {
var pieChart = document.getElementsByClassName('pie-chart--possession')[0],
data = [
[awayTeam, (pieChart && pieChart.getAttribute('data-away')) || null, 'away'],
[homeTeam, (pieChart && pieChart.getAttribute('data-home')) || null, 'home']
],
width = 250,
height = 250,
radius = Math.min(height, width) / 2,
arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius / 3),
pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d[1];
}),
// Init d3 chart
vis = d3.select('.pie-chart')
.attr('preserveAspectRatio', 'xMinYMin slice')
.attr('viewBox', '0 0 250 250')
.append('g')
.attr('class', 'pie-chart__inner')
.attr('transform', 'translate(' + width / 2 + ',' + width / 2 + ')');
// Add percentage symbol to center
vis.append('text')
.attr('class', 'pie-chart__key')
.text('%')
.attr('transform', 'translate(-18,15)');
// Background
var backgroundData = [['null', 100]],
backgroundarc = d3.svg.arc()
.outerRadius(radius - 1)
.innerRadius((radius / 3) + 1);
vis.append('path')
.data(pie(backgroundData))
.attr('class', 'pie-chart__pie')
.attr('d', backgroundarc);
// Draw Segements
var g = vis.selectAll('.pie-chart__segment')
.data(pie(data))
.enter().append('g')
.attr('class', 'pie-chart__segment');
g.append('path')
.attr('class', function(d) {
return 'pie-chart__segment-arc pie-chart__segment-arc--' + d.data[2];
})
.attr('d', arc);
// Add Text Labels
var tblock = vis.selectAll('.pie-chart__label')
.data(pie(data))
.enter().append('foreignObject')
.attr('class', function(d) {
return 'pie-chart__label pie-chart__label--' + d.data[2];
})
.attr('width', 75)
.attr('height', 50)
.attr('text-anchor', 'middle')
.attr('transform', function (d) {
d.innerRadius = 0;
d.outerRadius = radius;
var textpoint = arc.centroid(d);
textpoint = [textpoint[0] - 35, textpoint[1] - 25];
return 'translate(' + textpoint + ')';
});
tblock.append('xhtml:div')
.attr('class', 'pie-chart__label-text')
.attr('width', '50')
.attr('x', 0)
.attr('dy', '1.2em')
.text(function (d) {
return d.data[0];
});
tblock.append('xhtml:div')
.attr('class', 'pie-chart__label-value')
.attr('x', 0)
.attr('dy', '1.2em')
.text(function (d) {
return d.data[1];
});
}