function footballChart()

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];
            });
    }