A Pen by Stéphane Bruckert.

index.html

<div id="doughnuts">
    <div class="doughnuts-out">
        <div class="ounch-logo-pieces piece-1 blue"></div>
        <div class="ounch-logo-pieces piece-2 blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
        <div class="ounch-logo-top-piece"></div>
    </div>
    <div class="doughnuts-mid">
        <div class="ounch-logo-pieces piece-1 blue"></div>
        <div class="ounch-logo-pieces piece-2 blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
    </div>
    <div class="doughnuts-in">
        <div class="ounch-logo-pieces piece-1  blue"></div>
        <div class="ounch-logo-pieces piece-2  blue"></div>
        <div class="ounch-logo-pieces piece-3 blue"></div>
        <div class="ounch-logo-pieces piece-4 blue"></div>
        <div class="ounch-logo-pieces piece-5 green"></div>
        <div class="ounch-logo-pieces piece-6 green"></div>
        <div class="ounch-logo-pieces piece-7 green"></div>
        <div class="ounch-logo-pieces piece-8 green"></div>
        <div class="ounch-logo-pieces piece-9 green"></div>
        <div class="ounch-logo-pieces piece-10 red"></div>
        <div class="ounch-logo-pieces piece-11 red"></div>
        <div class="ounch-logo-pieces piece-12 red"></div>
        <div class="ounch-logo-pieces piece-13 red"></div>
        <div class="ounch-logo-pieces piece-14 red"></div>
        <div class="ounch-logo-pieces piece-15 blue"></div>
    </div>
</div>
<div id="labels">
    <div class="label blue" id="piece-1">Reflection</div>
    <div class="label blue" id="piece-2">Big-picture thinking</div>
    <div class="label blue" id="piece-3">Learning orientation</div>
    <div class="label blue" id="piece-4">Developing ideas</div>
    <div class="label green" id="piece-5">Competency-oriented</div>
    <div class="label green" id="piece-6">Consensus</div>
    <div class="label green" id="piece-7">Conflict resolution</div>
    <div class="label green" id="piece-8">Emotional intelligence</div>
    <div class="label green" id="piece-9">And another
        <br />fifth variable</div>
    <div class="label red" id="piece-10">Goal setting</div>
    <div class="label red" id="piece-11">Coordination</div>
    <div class="label red" id="piece-12">Pragmatic
        <br />approach</div>
    <div class="label red" id="piece-13">Pro-activity</div>
    <div class="label red" id="piece-14">Planning</div>
    <div class="label blue" id="piece-15">Critical and analytic thinking</div>
</div>
<div id="dialog" class="ui-corner-all" title="Category">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p id="caution">
        <img src="https://dl.dropboxusercontent.com/u/55179154/caution.png" /><span id="text">Contributed by 0 out of 7 members</span>
    </p>
</div>

script.js

$(document).ready(function () {
    /* The data of our chart */
    var data = {
        1: 3,
        2: 1,
        3: 3,
        4: 2,
        5: 2,
        6: 1,
        7: 3,
        8: 1,
        9: 3,
        10: 2,
        11: 2,
        12: 3,
        13: 1,
        14: 2,
        15: 2
    };
    setDoughnut(data);

    /* Function that fills the doughtnut with our data */
    function setDoughnut(data) {
        for (key in data) {
            var piece = ".piece-" + key;

            var color;
            if (key < 5 || key >= 15) {
                color = "blue";
            } else if (key >= 5 && key < 10) {
                color = "green";
            } else {
                color = "red";
            }

            if (data[key] > 1) {
                $(".doughnuts-in").find(piece).addClass(color + "in");
                if (data[key] >= 2) {
                    $(".doughnuts-mid").find(piece).addClass(color + "mid");
                    if (data[key] == 3) {
                        $(".doughnuts-out").find(piece).addClass(color + "out");
                    } else {
                        $(".doughnuts-out").find(piece).addClass("grey");
                    }
                } else {
                    $(".doughnuts-mid").find(piece).addClass("grey");
                    $(".doughnuts-out").find(piece).addClass("greyout");
                }
            } else {
                $(".doughnuts-in").find(piece).addClass("empty");
                $(".doughnuts-mid").find(piece).addClass("grey");
                $(".doughnuts-out").find(piece).addClass("greyout");
            }
        }
    }

    /* Hovering a piece */
    $(".ounch-logo-pieces").hover(function () {
        var piece = $(this).attr('class').split(' ')[1];
        $("." + piece).darken(30);
    }, function () {
        var piece = $(this).attr('class').split(' ')[1];
        $("." + piece).darken(-44);
    });

    /* Clicking a piece */
    $('.ounch-logo-pieces').click(function () {
        var piece = $(this).attr('class').split(' ')[1];
        var title = $("#labels #" + piece).html();
        $('#dialog').dialog();
        $("#dialog").dialog( "option", "title", title);
        $("#dialog").dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header');
    });

    /* jQuery darkener */
    jQuery.fn.darken = function (darkenPercent) {
        $(this).each(function () {
            var rgb = $(this).css('background-color');
            rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
            var red = $.trim(rgb[0]);
            var green = $.trim(rgb[1]);
            var blue = $.trim(rgb[2]);

            // darken
            red = parseInt(red * (100 - darkenPercent) / 100);
            green = parseInt(green * (100 - darkenPercent) / 100);
            blue = parseInt(blue * (100 - darkenPercent) / 100);
            // lighten
            /* red = parseInt(red * (100 - darkenPercent) / 100);
		green = parseInt(green * (100 - darkenPercent) / 100);
		blue = parseInt(blue * (100 - darkenPercent) / 100); */

            rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

            $(this).css('background-color', rgb);
        });
        return this;
    }
});

style.css

/* Doughnut layers */
 .doughnuts-out {
    margin: 150px;
    width: 500px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}
.doughnuts-mid {
    margin: 150px;
    width: 450px;
    height: 450px;
    position: absolute;
    left: 25px;
    top: 25px;
    background: #f0f0f0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}
.doughnuts-in {
    margin: 150px;
    width: 320px;
    height: 320px;
    position: absolute;
    left: 90px;
    top: 90px;
    background: #f0f0f0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
}

/* Doughnut composition */
 .ounch-logo-pieces {
    position: absolute;
    top:0%;
    left: 50%;
    bottom:50%;
    right:0%;
    width: 50%;
    height: 50%;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    -moz-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    -ms-box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
    box-shadow: inset 1px 0 0px rgba(255, 255, 255, 0.58);
}
.ounch-logo-top-piece {
    background-image:url("https://dl.dropboxusercontent.com/u/55179154/TMlogo.png");
    background-position:45% 40%;
    position: absolute;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    -ms-border-radius: 100%;
    width:calc(50% - 4px);
    height: calc(50% - 4px);
    left:50%;
    top:50%;
    margin: -25% 0 0 -25%;
    z-index: 20;
    border: 4px solid #a6aac5;
}

/* Doughnut pieces */
 .piece-1 {
    z-index: 2;
}
.piece-2 {
    -webkit-transform: rotate(24deg);
    -moz-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
    z-index: 3;
}
.piece-3 {
    -webkit-transform: rotate(48deg);
    -moz-transform: rotate(48deg);
    -ms-transform: rotate(48deg);
    transform: rotate(48deg);
    z-index: 4;
}
.piece-4 {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg);
    z-index: 5;
}
.piece-5 {
    -webkit-transform: rotate(96deg);
    -moz-transform: rotate(96deg);
    -ms-transform: rotate(96deg);
    transform: rotate(96deg);
    z-index: 6;
}
.piece-6 {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    z-index: 7;
}
.piece-7 {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    transform: rotate(144deg);
    z-index: 8;
}
.piece-8 {
    -webkit-transform: rotate(168deg);
    -moz-transform: rotate(168deg);
    -ms-transform: rotate(168deg);
    transform: rotate(168deg);
    z-index: 9;
}
.piece-9 {
    -webkit-transform: rotate(192deg);
    -moz-transform: rotate(192deg);
    -ms-transform: rotate(192deg);
    transform: rotate(192deg);
    z-index: 10;
}
.piece-10 {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    transform: rotate(216deg);
    z-index: 11;
}
.piece-11 {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
    z-index: 12;
}
.piece-12 {
    -webkit-transform: rotate(264deg);
    -moz-transform: rotate(264deg);
    -ms-transform: rotate(264deg);
    transform: rotate(264deg);
    z-index: 13;
}
.piece-13 {
    -webkit-transform: rotate(288deg) skewY(-24deg);
    -moz-transform: rotate(288deg) skewY(-24deg);
    -ms-transform: rotate(288deg) skewY(-24deg);
    transform: rotate(288deg) skewY(-24deg);
    z-index: 14;
}
.piece-14 {
    -webkit-transform: rotate(312deg) skewY(-55deg);
    -moz-transform: rotate(312deg) skewY(-55deg);
    -ms-transform: rotate(312deg) skewY(-55deg);
    transform: rotate(312deg) skewY(-55deg);
    z-index: 15;
}
.piece-15 {
    -webkit-transform: rotate(336deg) skewY(-66deg);
    -moz-transform: rotate(336deg) skewY(-66deg);
    -ms-transform: rotate(336deg) skewY(-66deg);
    transform: rotate(336deg) skewY(-66deg);
    z-index: 16;
}

/* Pieces colors */
.bluemid {
    background: #0081c8;
}
.bluein {
    background: #80c0e3;
}
.blueout {
    background: #015ca1;
}
.blue {
    color: #0081c8;
}
.redmid {
    background: #e53ba5;
}
.redin {
    background: #f29dd2;
}
.redout {
    background: #a02a85;
}
.red {
    color: #e53ba5;
}
.greenmid {
    background: #3ab300;
}
.greenin {
    background: #9dd980;
}
.greenout {
    background: #288000;
}
.green {
    color: #3ab300;
}
.empty {
    background: #ffd28a;
}
.grey {
    background: #edeef3;
}
.greyout {
    background: #f7f8fa;
}
.label {
    position: absolute;
    font-size: 20px;
}

/* Label positions */
 #piece-1 {
    top: 120px;
    left: 450px;
}
#piece-2 {
    top: 170px;
    left: 570px;
}
#piece-3 {
    top: 260px;
    left: 640px;
}
#piece-4 {
    top: 360px;
    left: 680px;
}
#piece-5 {
    top: 470px;
    left: 670px;
}
#piece-6 {
    top: 560px;
    left: 620px;
}
#piece-7 {
    top: 620px;
    left: 550px;
}
#piece-8 {
    top: 660px;
    left: 410px;
}
#piece-9 {
    top: 640px;
    left: 200px;
}
#piece-10 {
    top: 560px;
    left: 100px;
}
#piece-11 {
    top: 460px;
    left: 40px;
}
#piece-12 {
    top: 350px;
    left: 50px;
}
#piece-13 {
    top: 260px;
    left: 60px;
}
#piece-14 {
    top: 180px;
    left: 150px;
}
#piece-15 {
    top: 120px;
    left: 120px;
}

/* jQuery dialog */
 #dialog {
    display: none;
    position: relative;
}
.ui-dialog-title {
    padding-top: 20px;
    color: #e53ba5;
    font-size: 22px;
}
.ui-widget-content {
    font-size: 12px;
    padding-top: 0px;
    margin-top: 0px;
}
#dialog p {
    margin-top: 0px;
    color: #015ca1;
}
.ui-dialog {
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    -ms-box-shadow: 0 0 10px #000000;
    box-shadow: 0 0 10px #000000;
}
.ui-button-icon-primary {
    left: 0 !important;
    top: 0 !important;
}

/* Dialog content */
#caution {
    margin-top: 0;
    padding-top: 0;
}
#caution #text {
    font-weight: bold;
}
#caution img {
    vertical-align: middle;
}

Triple-Doughtnut-Chart.markdown

Triple Doughtnut Chart

For team-match.

A Pen by Stéphane Bruckert on CodePen.

License.