fancy(ier) Nav widgets

_.md

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

config.json

{"description":"fancy(ier) Nav widgets","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 = 900,
	height = 600;


var data = {
    "arcs": [
              {
                "id": 0,
                "innerRadius": 15,
                "outerRadius": 65,
                "x": 90,
                "dy": 125,
                "text": "X"
              },
            
              {
                "id": 1,
                "innerRadius": 75,
                "outerRadius": 125,
                "x": 45,
                "dy": 60,
                "text": "B l o g"
              },
              {
                "id": 2,
                "innerRadius": 135,
                "outerRadius": 185,
                "x": 45,
                "dy": 5,
                "text": "About"
              },
              {
                "id": 3,
                "innerRadius": 195,
                "outerRadius": 245,
                "x": 45,
                "dy": -60,
                "text": "Github"
              },
             {
                "id": 4,
                "innerRadius": 255,
                "outerRadius": 305,
                "x": 45,
                "dy": -115,
                "text": "Contact"
              }
          ]
}



// arcs default settings - inner and outer radii, start and end angle
var arc = d3.svg.arc()
	.innerRadius(1)
	.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(280,363)");

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

canvas.selectAll("path.arc").data(data.arcs)
	.enter().append("path")
	.attr("class", "arc")
	.attr("id", function(d, i) { return "path" + (i+1); })
	.transition(5000)
	.duration(function(d, i) { return i*1000; })
	.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; })
	.append("textPath")
	.attr("xlink:href", "#text-path")
	.text(function(d) { return d.text; });

style.css

#path1 {
  fill: #3182bd;
}

#path2 {
	fill: red;
}

#path3 {
	fill: yellow;
}


#path4 {
	fill: lime;
}

#path5 {
	fill: orange;
}

text {
  font-family: "Ubuntu", Helvetica, Arial, sans-serif;
  font-size: 40px;
}