factual-scorecard.css

.factual-scorecard {
  width: 558px;
  height: 360px;
  position: relative;
  font-family: "Open Sans", sans-serif;
}

.factual-scorecard img.factual-scorecard-photo {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 234px;
  max-height: 292px;
}

.factual-scorecard-text {
  position: absolute;
  top: 0;
  left: 234px;
  right: 0;
  bottom: 68px;
  padding: 20px 30px;
  font-size: 22px;
  font-style: italic;
}

.factual-scorecard-footer {
  position: absolute;
  left: 264px;
  right: 80px;
  bottom: 78px;
  font-size: 14px;
}

.factual-scorecard-pie {
  position: absolute;
  right: 0;
  bottom: 36px;
  width: 65px;
  height: 65px;
}

.factual-scorecard-logo-1 {fill:#404041;fill-rule:nonzero}
.factual-scorecard-logo-0 {fill:#C4C5C7;fill-rule:nonzero}
.factual-scorecard-logo-2 {fill:white;fill-rule:nonzero}

factual-scorecard.js

(function() {
  'use strict';

  var π = Math.PI;

  var color = {
    0: {background: '#000000', font: 'white'},
    1: {background: '#ee4223', font: 'white'},
    2: {background: '#f8a98e', font: 'black'},
    3: {background: '#b2dde1', font: 'black'},
    4: {background: '#00b2bd', font: 'white'}
  };

  var slices = [
    {score: 1, startAngle: -π/2, endAngle: -π/4},
    {score: 2, startAngle: -π/4, endAngle: 0},
    {score: 3, startAngle: 0, endAngle: π/4},
    {score: 4, startAngle: π/4, endAngle: π/2},
    {score: 0, startAngle: π/2, endAngle: π*3/2}
  ];

  d3.selectAll('.factual-scorecard').call(function() {
    var box = this;
    var score = box.attr('data-score');
    var width = 65;
    var height = 65;

    var arc = d3.svg.arc()
        .innerRadius(width / 10)
        .outerRadius(width / 2);

    box.select('.factual-scorecard-text')
        .attr('style', 'background: ' + color[score].background +
                       '; color: ' + color[score].font);

    box.select('.factual-scorecard-footer')
        .attr('style', 'color: ' + color[score].font);

    var svg = box.append('svg')
        .attr('class', 'factual-scorecard-pie');

    var pie = svg.append('g')
        .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');

    pie.append('circle')
        .attr('r', width / 4)
        .attr('fill', 'black');

    pie.append('circle')
        .attr('r', width / 20)
        .attr('fill', 'white');

    pie.selectAll('path')
        .data(slices)
      .enter().append('path')
        .attr('d', arc)
        .attr('fill', function(d) { return color[d.score].background })
        .attr('stroke', function(d) { return color[d.score].background });

    pie.append('g')
        .attr('fill', 'white')
        .attr('transform', 'translate(-22,-6)')
      .append('g')
        .attr('transform', 'scale(.006)')
        .html(
          '<path class="factual-scorecard-logo-0" d="M3498 4231c-1,0 -2,0 -3,0 -6,-2 -10,-8 -8,-14 14,-51 17,-1005 17,-1503 0,-6 6,-11 12,-11 6,0 12,5 12,11 0,59 -1,1443 -19,1509 -1,5 -6,8 -11,8z"/>'+
          '<path class="factual-scorecard-logo-0" d="M4029 2672c-84,0 -160,-19 -217,-39 -6,-2 -10,-9 -8,-15 3,-6 9,-9 15,-7 86,30 216,57 348,18 7,-1 13,2 15,8 2,6 -2,13 -8,15 -49,14 -98,20 -145,20z"/>'+
          '<path class="factual-scorecard-logo-0" d="M3188 4601c-104,0 -207,-50 -285,-88 -105,-51 -178,7 -209,32 -4,3 -8,6 -10,8 -6,4 -13,3 -16,-3 -4,-5 -3,-12 2,-16 3,-1 6,-4 10,-7 31,-25 115,-92 231,-36 128,62 300,146 442,27 5,-4 12,-3 17,2 4,5 3,12 -2,16 -57,48 -119,65 -180,65z"/>'+
          '<path class="factual-scorecard-logo-0" d="M3196 4254c-6,0 -11,-5 -11,-12l0 -992c0,-6 5,-12 11,-12 6,0 12,6 12,12l0 992c0,7 -6,12 -12,12z"/>'+
          '<path class="factual-scorecard-logo-0" d="M3196 3262l0 0c-7,-1 -12,-6 -11,-12 0,-1 2,-75 -46,-82 -6,-1 -10,-7 -9,-14 0,-6 6,-10 13,-9 68,10 65,102 65,105 -1,7 -6,12 -12,12z"/>'+
          '<path class="factual-scorecard-logo-1" d="M4519 2354c0,0 11,-6 10,5l-10 -5z"/>'+
          '<path class="factual-scorecard-logo-1" d="M4529 2359l-10 -5c0,0 -307,225 -578,-35l-360 340c0,0 0,1440 -18,1505 -18,66 -80,270 -331,164 -251,-105 -316,-116 -400,-36 -83,80 -174,167 -174,167 0,0 -6,29 18,13 24,-17 105,-102 229,-42 124,60 305,149 455,25 149,-123 392,-318 394,-463 1,-88 2,-591 6,-985 47,1 129,-1 192,-12 73,-12 195,-142 247,-201 -1,-10 -3,-12 -10,-7 -41,22 -111,54 -183,54 -112,0 -240,-7 -240,-7l-3 0c3,-175 7,-301 13,-313 0,0 460,271 753,-162z"/>'+
          '<path class="factual-scorecard-logo-1" d="M3079 3154c190,-141 182,41 182,41l0 1137c214,-3 182,-437 182,-437 0,0 -2,-957 -5,-1013 -2,-56 -34,-43 -34,-43l-337 288c0,0 -3,5 -4,12 -1,16 16,15 16,15z"/>'+
          '<path class="factual-scorecard-logo-2" d="M3498 4231c-1,0 -2,0 -3,0 -6,-2 -10,-8 -8,-14 14,-51 17,-1005 17,-1503 0,-6 6,-11 12,-11 6,0 12,5 12,11 0,59 -1,1443 -19,1509 -1,5 -6,8 -11,8z"/>'+
          '<path class="factual-scorecard-logo-2" d="M4029 2672c-84,0 -160,-19 -217,-39 -6,-2 -10,-9 -8,-15 3,-6 9,-9 15,-7 86,30 216,57 348,18 7,-1 13,2 15,8 2,6 -2,13 -8,15 -49,14 -98,20 -145,20z"/>'+
          '<path class="factual-scorecard-logo-2" d="M3188 4601c-104,0 -207,-50 -285,-88 -105,-51 -178,7 -209,32 -4,3 -8,6 -10,8 -6,4 -13,3 -16,-3 -4,-5 -3,-12 2,-16 3,-1 6,-4 10,-7 31,-25 115,-92 231,-36 128,62 300,146 442,27 5,-4 12,-3 17,2 4,5 3,12 -2,16 -57,48 -119,65 -180,65z"/>'+
          '<path class="factual-scorecard-logo-2" d="M3196 4254c-6,0 -11,-5 -11,-12l0 -992c0,-6 5,-12 11,-12 6,0 12,6 12,12l0 992c0,7 -6,12 -12,12z"/>'+
          '<path class="factual-scorecard-logo-2" d="M3196 3262l0 0c-7,-1 -12,-6 -11,-12 0,-1 2,-75 -46,-82 -6,-1 -10,-7 -9,-14 0,-6 6,-10 13,-9 68,10 65,102 65,105 -1,7 -6,12 -12,12z"/>'+
          '<path class="factual-scorecard-logo-2" d="M4519 2354c0,0 11,-6 10,5l-10 -5z"/>'+
          '<path class="factual-scorecard-logo-2" d="M4529 2359l-10 -5c0,0 -307,225 -578,-35l-360 340c0,0 0,1440 -18,1505 -18,66 -80,270 -331,164 -251,-105 -316,-116 -400,-36 -83,80 -174,167 -174,167 0,0 -6,29 18,13 24,-17 105,-102 229,-42 124,60 305,149 455,25 149,-123 392,-318 394,-463 1,-88 2,-591 6,-985 47,1 129,-1 192,-12 73,-12 195,-142 247,-201 -1,-10 -3,-12 -10,-7 -41,22 -111,54 -183,54 -112,0 -240,-7 -240,-7l-3 0c3,-175 7,-301 13,-313 0,0 460,271 753,-162z"/>'+
          '<path class="factual-scorecard-logo-2" d="M3079 3154c190,-141 182,41 182,41l0 1137c214,-3 182,-437 182,-437 0,0 -2,-957 -5,-1013 -2,-56 -34,-43 -34,-43l-337 288c0,0 -3,5 -4,12 -1,16 16,15 16,15z"/>');
  });
})();

index.html

<!doctype html>
<meta charset="utf-8">

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/103063/static/factual/factual-scorecard.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300&subset=latin,latin-ext">

<body>

<div class="factual-scorecard" data-score="4">
  <img src="eduard-hellvig.png" class="factual-scorecard-photo">

  <div class="factual-scorecard-text">
    <span style="font-size: 10px">
      „Documentele Serviciului Român de Informații pot fi
      desecretizate după 40 de ani.”
    </span>
  </div>

  <div class="factual-scorecard-footer">
    Eduard Hellvig, 24 februarie 2015
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/103063/static/factual/factual-scorecard.js"></script>