rubbish: Nav widget with d3

_.md

[ Launch: Nav widget with d3 ] 8408617 by DeBraid
[ Launch: stock chart ] 7919286 by DeBraid

config.json

{"description":"rubbish: 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;

// arcs default settings - inner and outer radii, start and end angle
var data = {
    "arcs": [
        {
          "id": 1,
          "innerRadius": 100,
          "outerRadius": 150,
          "x": 45,
          "dy": 45,
          "text": "About"
        },
        {
          "id": 2,
          "innerRadius": 160,
          "outerRadius": 210,
          "x": 45,
          "dy": -15,
          "text": "Github"
        },
        {
          "id": 3,
          "innerRadius": 220,
          "outerRadius": 270,
          "x": 45,
          "dy": -75,
          "text": "Contact"
        }
    ]
}

console.log(data.arcs[0].id);

var arc = d3.svg.arc()
    .innerRadius(function(data){ return data[i].innerRadius; })
	.outerRadius(function(d,i){ return data[i].outerRadius; })
	.startAngle(0)
	.endAngle(function(t) { return t * 2 * Math.PI / 4; });


console.log("foo");
console.log(arc);

console.log("bar");

var arc2 = d3.svg.arc()
	.innerRadius(160)
	.outerRadius(210)
	.startAngle(0)
	.endAngle(function(t) { return t * 2 * Math.PI / 4; });

var arc3 = d3.svg.arc()
	.innerRadius(220)
	.outerRadius(270)
	.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.append("defs").append("path")
	.attr("id", "text-path2")
	.attr("d", arc(1));

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

canvas.append("path")
    .attr("id", "path1");

canvas.append("path")
    .attr("id", "path2");

canvas.append("path")
    .attr("id", "path3");

// clip paths
canvas.append("clipPath")
    .attr("id", "text-clip1")
    .append("use")
    .attr("xlink:href", "#path1");

canvas.append("clipPath")
    .attr("id", "text-clip2")
    .append("use")
    .attr("xlink:href", "#path2");

canvas.append("clipPath")
    .attr("id", "text-clip3")
    .append("use")
    .attr("xlink:href", "#path3");


// write text
canvas.append("text")
    .attr("clip-path", "url(#text-clip1)")
    .attr("x", 45)
    .attr("dy", 45)
  .append("textPath")
    .attr("xlink:href", "#text-path")
    .text("About");

canvas.append("text")
    .attr("clip-path", "url(#text-clip2)")
    .attr("x", 45)
    .attr("dy", -15)
  .append("textPath")
    .attr("xlink:href", "#text-path")
    .text("Github");

canvas.append("text")
    .attr("clip-path", "url(#text-clip3)")
    .attr("x", 45)
    .attr("dy", -75)
  .append("textPath")
    .attr("xlink:href", "#text-path")
    .text("Contact");




// call the functions 
d3.select("#path1").transition().duration(6000)
    .attrTween("d", function() { return arc; });


d3.select("#path2").transition().duration(4000)
    .attrTween("d", function() { return arc2; });

d3.select("#path3").transition().duration(2000)
    .attrTween("d", function() { return arc3; });

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