Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="mandate-overview">
  <div>
  <!-- calc backend for labels: 
deg = previousPartysDeg + $count/349*180deg/2
x = 100-(50*cos(deg*3.14/180)+50)
;; 100- = start from left, 
;; r * cos(angle in radians) + startX
y= 50*sin(deg*3.14/180)
;; r * sin(angle in radians) + startY
-->
    <span class="mandate-overview__party"
        style="left: 0.18%;bottom:8.53%;">V</span>
    <span class="mandate-overview__party"
        style="left:11%;bottom:62.5%;">S</span>
    <span class="mandate-overview__party"
        style="left:36.1%;bottom:96.1%;">MP</span>
    <span class="mandate-overview__party"
        style="left:46.1%;bottom:99.7%">SD</span>
    <span class="mandate-overview__party"
        style="display:none">PP</span>
    <span class="mandate-overview__party"
        style="display:none;">JL</span>
    <span class="mandate-overview__party"
        style="left:55.8%;bottom:99.3%;">C</span>
    <span class="mandate-overview__party"
        style="left:66.1%;bottom:94.7%;">FP</span>
    <span class="mandate-overview__party"
        style="left:74.9%;bottom:86.7%;">KD</span>
    <span class="mandate-overview__party"
        style="left:94.3%;bottom:46.4%;">M</span>
    <ul class="mandate-overview__circle-wrapper">
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
    </ul>
  </div>

</div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// ----

* {
  box-sizing: border-box;
}
ul { list-style: none;padding:0;}
@mixin mandate($count) {
  $deg: $count/349*180deg;
  -webkit-transform: rotate($deg);
  -mox-transform: rotate($deg);
  -ms-transform: rotate($deg);
  transform: rotate($deg);
}
$size: 300px;
$padding: 10px;

.mandate-overview {
  width: $size + $padding*2;
  height: $size/2 + $padding;

  margin: 20px;
  padding: 0;
  padding-top: $padding/2;
  padding-left: $padding/2;
  padding-right: $padding/2;
  position: relative;
  
  &>div {
    width: 100%;
    height: 100%;
  }
}
.mandate-overview__circle-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-top: $padding/2;
  padding-left: $padding/2;
  padding-right: $padding/2;
  position: relative;
}
.mandate-overview__circle {
  width: $size;
  height: $size;
  position: absolute;
  border: $size/3 solid transparent;
  border-radius: 100%;
  clip: rect(0 $size $size/2 0);
  
   &:nth-child(1) {
     border-color: firebrick;
      @include mandate(0); //19
    }
    &:nth-child(2) {
      border-color: red;
      @include mandate(19); //112
    }
    &:nth-child(3) {
      border-color: lime;
      @include mandate(19+112); //25
    }
    &:nth-child(4) {
      border-color: yellow;
      @include mandate(19+112+25); //20
    }
    &:nth-child(5) {
      border-color: black;
      @include mandate(19+112+25+20); //0
    }
    &:nth-child(6) {
      border-color: black;
      @include mandate(19+112+25+20+0); //0
    }
    &:nth-child(7) {
      border-color: limegreen;
      @include mandate(19+112+25+20+0+0); //23
    }
    &:nth-child(8) {
      border-color: lightblue;
      @include mandate(19+112+25+20+0+0+23); //24
    }
    &:nth-child(9) {
      border-color: navy;
      @include mandate(19+112+25+20+0+0+23+24); //19
    }
    &:nth-child(10) {
      border-color: blue;
      @include mandate(19+112+25+20+0+0+23+24+19); //107
    }
}
.mandate-overview__party {
  position: absolute;
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
}

.mandate-overview {
  width: 320px;
  height: 160px;
  margin: 20px;
  padding: 0;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}
.mandate-overview > div {
  width: 100%;
  height: 100%;
}

.mandate-overview__circle-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}

.mandate-overview__circle {
  width: 300px;
  height: 300px;
  position: absolute;
  border: 100px solid transparent;
  border-radius: 100%;
  clip: rect(0 300px 150px 0);
}
.mandate-overview__circle:nth-child(1) {
  border-color: firebrick;
  -webkit-transform: rotate(0deg);
  -mox-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mandate-overview__circle:nth-child(2) {
  border-color: red;
  -webkit-transform: rotate(9.7994269341deg);
  -mox-transform: rotate(9.7994269341deg);
  -ms-transform: rotate(9.7994269341deg);
  transform: rotate(9.7994269341deg);
}
.mandate-overview__circle:nth-child(3) {
  border-color: lime;
  -webkit-transform: rotate(67.564469914deg);
  -mox-transform: rotate(67.564469914deg);
  -ms-transform: rotate(67.564469914deg);
  transform: rotate(67.564469914deg);
}
.mandate-overview__circle:nth-child(4) {
  border-color: yellow;
  -webkit-transform: rotate(80.4584527221deg);
  -mox-transform: rotate(80.4584527221deg);
  -ms-transform: rotate(80.4584527221deg);
  transform: rotate(80.4584527221deg);
}
.mandate-overview__circle:nth-child(5) {
  border-color: black;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(6) {
  border-color: black;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(7) {
  border-color: limegreen;
  -webkit-transform: rotate(90.7736389685deg);
  -mox-transform: rotate(90.7736389685deg);
  -ms-transform: rotate(90.7736389685deg);
  transform: rotate(90.7736389685deg);
}
.mandate-overview__circle:nth-child(8) {
  border-color: lightblue;
  -webkit-transform: rotate(102.6361031519deg);
  -mox-transform: rotate(102.6361031519deg);
  -ms-transform: rotate(102.6361031519deg);
  transform: rotate(102.6361031519deg);
}
.mandate-overview__circle:nth-child(9) {
  border-color: navy;
  -webkit-transform: rotate(115.0143266476deg);
  -mox-transform: rotate(115.0143266476deg);
  -ms-transform: rotate(115.0143266476deg);
  transform: rotate(115.0143266476deg);
}
.mandate-overview__circle:nth-child(10) {
  border-color: blue;
  -webkit-transform: rotate(124.8137535817deg);
  -mox-transform: rotate(124.8137535817deg);
  -ms-transform: rotate(124.8137535817deg);
  transform: rotate(124.8137535817deg);
}

.mandate-overview__party {
  position: absolute;
}

SassMeister-rendered.html

<div class="mandate-overview">
  <div>
  <!-- calc backend for labels: 
deg = previousPartysDeg + $count/349*180deg/2
x = 100-(50*cos(deg*3.14/180)+50)
;; 100- = start from left, 
;; r * cos(angle in radians) + startX
y= 50*sin(deg*3.14/180)
;; r * sin(angle in radians) + startY
-->
    <span class="mandate-overview__party"
        style="left: 0.18%;bottom:8.53%;">V</span>
    <span class="mandate-overview__party"
        style="left:11%;bottom:62.5%;">S</span>
    <span class="mandate-overview__party"
        style="left:36.1%;bottom:96.1%;">MP</span>
    <span class="mandate-overview__party"
        style="left:46.1%;bottom:99.7%">SD</span>
    <span class="mandate-overview__party"
        style="display:none">PP</span>
    <span class="mandate-overview__party"
        style="display:none;">JL</span>
    <span class="mandate-overview__party"
        style="left:55.8%;bottom:99.3%;">C</span>
    <span class="mandate-overview__party"
        style="left:66.1%;bottom:94.7%;">FP</span>
    <span class="mandate-overview__party"
        style="left:74.9%;bottom:86.7%;">KD</span>
    <span class="mandate-overview__party"
        style="left:94.3%;bottom:46.4%;">M</span>
    <ul class="mandate-overview__circle-wrapper">
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
      <li class="mandate-overview__circle"></li>
    </ul>
  </div>

</div>