Circle text

_.md

[ Launch: Tributary inlet ] 4734549 by roundrobin

config.json

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

inlet.js

var dataset = [{label:"Hello1", value:5},{label:"Hello2", value:10},{label:"Hello3",value:15},{label:"Hello4", value:20},{label:"Hello5", value:25}];

var arc = d3.svg.arc()
  .innerRadius(function(d,i){return (5-i)*35;})
  .outerRadius(function(d,i){return (5-i)*35+30;})
  .startAngle(0)
  .endAngle(2 * Math.PI);

var svg = g.selectAll("g")
  .data(dataset)
  .enter()
  .append("g")
  .attr("transform", "translate(236,250)");

var thing = svg.append("g")
  .attr("id","thing")
  .style("fill","navy")
  .attr("class", "label");

var arcs = svg.append("path")
  .style("fill","red")
  .attr("id", function(d,i){return "s"+i;})
  .attr("d",arc);


thing.append("text")
  .style("font-size",20)
  .append("textPath")
  .attr("textLength",function(d,i){return 164-i*5 ;})
  .attr("xlink:href",function(d,i){return "#s"+i;})
  .attr("startOffset",function(d,i){return 3/20;})
  .attr("dy","-1em")
  .text(function(d){return d.label;})