testing

_.md

[ Launch: testing ] 5792405 by agent00tai
[ Launch: testing ] 5792402 by agent00tai

config.json

{"description":"testing","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}},"fullscreen":false,"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}

inlet.js

var width = 960,
    height = 500,
    tau = 2 * Math.PI;

var data = [{x: 1, time: 59}, {x: 2, time: 29}];

var arc = d3.svg.arc()
    .innerRadius(40)
    .outerRadius(50)
    .startAngle(0);

var svg = d3.select("svg")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

var node = svg.selectAll("g.node");

var nodeenter = node.data(data).enter().append("svg:g")
		.attr("class", "node")
		.attr("transform", function(d) { return "translate(" + d.x * 135 + ", 0)"; } );
        //.call(force.drag);

nodeenter.append('path')
		.attr("class", "bg")
		.datum({endAngle: tau})
		.style("fill", "#DDD")
		.attr("d", arc)

nodeenter.append('path')
		.attr("class", "fg")
		.datum(function(d) { return {endAngle: (d.time/60) * tau}; } )
		.style("fill", "#3d9bda")
		.attr("d", arc)

nodeenter.append("text")
		.text(function(d) { return d.time; })
		.attr('text-anchor', 'middle')
		.attr('y', 5);

setTimeout(function() {
	var update = svg.selectAll("g.node").data([{x: 1, time: 10}, {x: 2, time: 29}]);
	//update.select("path.fg").transition().duration(750).call(arcTween, 578412);
	update.select("text").text(d.time);
    return false;
}, 7190);

function arcTween(transition, newAngle) {
  transition.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, 0.5*tau)//((d.time/60) * tau));
    console.log(d);

    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
  });
}