File: docs/metrics/phpmetrics.html/js/graph-maintainability.js

function chartMaintainability() {

    var diameter = document.getElementById('svg-maintainability').offsetWidth;

    var json = {
        name: 'chart',
        children: classes
    };

    var svg = d3.select('#svg-maintainability').append('svg')
        .attr('width', diameter)
        .attr('height', diameter);


    var bubble = d3.layout.pack()
        .size([diameter, diameter])
        .padding(3)
        .value(function (d) {
            return d.ccn;
        });

    var nodes = bubble.nodes(json)
        .filter(function (d) {
            return !d.children;
        }); // filter out the outer bubble*

    var vis = svg.selectAll('circle')
        .data(nodes, function (d) {
            return d.name;
        });

    vis.enter().append('circle')
        .attr('transform', function (d) {
            return 'translate(' + d.x + ',' + d.y + ')';
        })
        .attr('r', function (d) {
            return d.r;
        })
        .style("fill", function (d) {
            if (d.mi > 85) {
                return '#8BC34A';
            } else if (d.mi > 69) {
                return '#FFC107';
            } else {
                return '#F44336';
            }
        })
        .attr("transform", function (d) {
            return "translate(" + d.x + "," + d.y + ")";
        })
        .on('mouseover', function (d) {
            var text = '<strong>' + d.name + '</strong>'
                + "<br />Cyclomatic Complexity : " + d.ccn
                + "<br />Maintainability Index: " + d.mi;
            d3.select('.tooltip').html(text);
            d3.select(".tooltip").style("opacity", 1);
        })
        .on('mousemove', function () {
            d3.select(".tooltip")
                .style("left", (d3.event.pageX + 5) + "px")
                .style("top", (d3.event.pageY + 5) + "px");
        })
        .on('mouseout', function () {
            d3.select(".tooltip").style("opacity", 0);
        });

    d3.select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

}