Julia is Pretty

by Nivaldo

HTML

<svg/>

CSS

#path1 {
  fill: #3182bd;
}

#path2 {
	fill: red;
}

#path3 {
	fill: yellow;
}

text {
  font-family: "American Typewriter", Helvetica, Arial, sans-serif;
  font-size: 50px;
}

#path2 {
	fill: red;
}

JavaScript

// building arcing text, from ex. http://bl.ocks.org/mbostock/3151318
var width = 400,
	height = 400;

var data = {
    "arcs": [
        {
          "id": 1,
          "innerRadius": 100,
          "outerRadius": 150,
          "x": 45,
          "dy": 45,
          "text": "Pretty"
        },
        {
          "id": 2,
          "innerRadius": 160,
          "outerRadius": 210,
          "x": 45,
          "dy": -15,
          "text": "Is"
        },
        {
          "id": 3,
          "innerRadius": 220,
          "outerRadius": 270,
          "x": 45,
          "dy": -75,
          "text": "Julia"
        }
    ]
}

// arcs default settings - inner and outer radii, start and end angle
var arc = d3.svg.arc()
	.innerRadius(100)
	.outerRadius(150)
	.startAngle(0)
	.endAngle(function(t) { return t * 2 * Math.PI / 4; });

// canvas
var canvas = d3.select("svg")
	.attr({"width": width, "height": height})
	.append("g")
	.attr("transform", "translate(0,300)");

// text paths
canvas.append("defs").append("path")
    .attr("id", "text-path")
    .attr("d", arc(1));

canvas.selectAll("path.arc").data(data.arcs)
	.enter().append("path")
	.attr("class", "arc")
	.attr("id", function(d, i) { return "path" + (i+1); })
	.transition().duration(function(d, i) { return 6000 - i * 2000; })
	.attrTween("d", function(d, i) {
      return d3.svg.arc()
      		.innerRadius(d.innerRadius)
      		.outerRadius(d.outerRadius)
      		.startAngle(0)
      		.endAngle(function(t) { return t * 2 * Math.PI / 4; });
	});

canvas.selectAll("clipPath").data(data.arcs)
	.enter().append("clipPath")
	.attr("id", function(d, i) { return "text-clip" + i; })
	.append("use")
	.attr("xlink:href", function(d, i) { return "#path" + (i+1); });

canvas.selectAll("text").data(data.arcs)
	.enter().append("text")
	.attr("clip-path", function(d, i) { return "url(#text-clip" + i + ")"; })
	.attr("x", function(d) { return d.x; })
	.attr("dy", function(d) { return d.dy;...