Nav widget with d3

_.md

[ Launch: stock chart ] 7919286 by DeBraid

config.json

{"description":"Nav widget with d3","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/2i8bAbb.png"}

inlet.js

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

var arcs = [
        {
          "id": 1,
          "innerRadius": 100,
          "outerRadius": 150,
          "x": 45,
          "dy": 45,
          "text": "About"
        },
        {
          "id": 2,
          "innerRadius": 155,
          "outerRadius": 210,
          "x": 45,
          "dy": -15,
          "text": "Github"
        },
        {
          "id": 3,
          "innerRadius": 215,
          "outerRadius": 265,
          "x": 45,
          "dy": -75,
          "text": "Contact"
        }
  ];

// 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(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(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(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; })
	.append("textPath")
	.attr("xlink:href", "#text-path")
	.text(function(d) { return d.text; });

style.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;
}