index.html

## index.html
<!DOCTYPE html>
<html
  <head>
    <meta charset="utf-8">
    <title>DA-TA-DA!</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <style type="text/less">

@fontFace: 'Montserrat', sans-serif;

@blue: #00aeef;
@orange: #fb561b;
@green: #2cb549;
@transparency: 0.2;

body {
  font-family: @fontFace;
  font-size: 10ex;
  font-weight: bold;
}

svg {
  display: block;
  margin: 0 auto;
}

path {
  &.on-blue {
    fill: rgba(red(@blue), green(@blue), blue(@blue), @transparency);

    &.white {
      fill: @blue;
    }
  }
  &.on-orange {
    fill: rgba(red(@orange), green(@orange), blue(@orange), @transparency);

    &.white {
      fill: @orange;
    }
  }
  &.on-green {
    fill: rgba(red(@green), green(@green), blue(@green), @transparency);

    &.white {
      fill: @green;
    }
  }
}

text {
  font-family: @fontFace;
  text-transform: uppercase;

  &.white {
    fill: white;
  }

  &.blue {
    fill: @blue;
  }

  &.orange {
    fill: @orange;
  }

  &.green {
    fill: @green;
  }
}

    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
  </head>
  <body>
    <script>

var innerRadius = 100,
    outerRadius = 150;

var size = outerRadius * 3;

var data = [
  { text: 'da', class: 'white on-blue' },
  { text: 'ta', class: 'orange on-blue' },
  { text: 'da', class: 'white on-orange' },
  { text: 'ta', class: 'green on-orange' },
  { text: 'da', class: 'white on-green' },
  { text: 'ta', class: 'blue on-green' }
].reduce(function(prev, curr) {
  curr.text.split('').forEach(function(char) {
    prev.push({ text: char, class: curr.class });
  });

  return prev;
}, []);

var arcSpan = (2 * Math.PI) / data.length,
    arcOffset = -Math.PI / 3,
    arcAngle = d3.scale.linear()
        .domain([0, data.length])
        .range([0 + arcOffset, (2 * Math.PI) + arcOffset]);

d3.select('body').append('svg')
    .attr('width', size)
    .attr('height', size)
    .selectAll('g').data(data).call(function(segments) {
      var newSegments = segments.enter().append('g');

      newSegments.append('path');
      newSegments.append('text');

      segments.selectAll('path')
          .attr({
            d: d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius)
                .startAngle(function(d, i, j) {
                  return arcAngle(j);
                })
                .endAngle(function(d, i, j) {
                  return arcAngle(j) + arcSpan;
                }),
            class: function(d) {
              return d.class;
            }
          });

      segments.selectAll('text')
          .text(function(d) {
            return d.text;
          })
          .style({
            'font-size': (outerRadius - innerRadius) + 'px'
          })
          .attr({
            class: function(d) {
              return d.class;
            },
            'text-anchor': 'middle',
            dy: '-.15em',
            transform: function(d, i, j) {
              var angle = (arcAngle(j) + arcSpan / 2) * (180 / Math.PI);

              return 'rotate(' + angle + ')translate(0, -' + innerRadius + ')';
            }
          });

      segments.attr({
        transform: 'translate(' + (size / 2) + ', ' + (size / 2) + ')'
      });
    });

    </script>
  </body>
</html>