Arc Pie

_.md

[ Launch: Arc Pie ] dac2a5ec620d7cbc87ab864449db1ed2 by inphomercial

config.json

{"description":"Arc Pie","endpoint":"","display":"svg","public":true,"require":[{"name":"lodash","url":"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"},{"name":"lodash","url":"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"}],"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,"ajax-caching":true,"thumbnail":"https://i.imgur.com/nNAeY72.gif"}

inlet.js

    var w = 700,                        //width
    h = 700,                            //height
    r = 200,                            //radius
    ir = 50,
    pi = Math.PI,
    color = d3.scale.category20c();     
 
    data = [{"label":"one", "value":20}, 
            {"label":"two", "value":50}, 
            {"label":"three", "value":30}];
    
    var vis = d3.select("svg") 
        .data([data])          
            .attr("width", w)  
            .attr("height", h)
        .append("svg:g")       
            .attr("transform", "translate(350, 350)");    
 
    var arc = d3.svg.arc()              
        .outerRadius(r - 20)
		.innerRadius(r);
 
    var pie = d3.layout.pie()           
        .value(function(d) { return d.value; })
        .startAngle(-0.8 * pi)
        .endAngle(0.8 * pi);
 
    var arcs = vis.selectAll("g.slice")     
        .data(pie)                          
        .enter()                            
            .append("svg:g")                
                .attr("class", "slice");    
 
        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } ) 
                .attr("d", arc);   


function redraw(data){
  
  	  var data = [{"label":"one", "value":_.random(0, 100)}, 
            {"label":"two", "value":_.random(0, 100)}, 
            {"label":"three", "value":_.random(0, 100)}];

      // join
      var arcs = d3.selectAll(".arc")
          .data(pie(data), function(d){ return d.data.name; });

      // update
      arcs 
        .transition()
          .duration(1500)
          .attrTween("d", arcTween);

      // enter
      arcs.enter().append("path")
        .attr("class", "arc")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc)
        .each(function(d) { this._current = d; });

    }

    // Store the displayed angles in _current.
    // Then, interpolate from _current to the new angles.
    // During the transition, _current is updated in-place by d3.interpolate.
    function arcTween(a) {
      console.log(this._current);
      var i = d3.interpolate(this._current, a);
      this._current = i(0);
      return function(t) {
        return arc(i(t));
      };
    }

    

setInterval(function() {
  console.log("calling");
  redraw();
}, 3000);