For team-match.
A Pen by Stéphane Bruckert on CodePen.
<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> |
$(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; | |
} | |
}); |
/* 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; | |
} |
For team-match.
A Pen by Stéphane Bruckert on CodePen.