emarschner/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>
	<!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>