function pie() {
    
    
    
    
     d3.select('#svg-pie').remove();
    
    
    
   var svg =  d3.select('#device').append('svg').attr('id','svg-pie');
    
    console.log(d3.select('#svg-pie').node().getBoundingClientRect().width)
    
  
    var
    width = d3.select('#svg-pie').node().getBoundingClientRect().width,
    height = d3.select('#svg-pie').node().getBoundingClientRect().height,
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    
    
    var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(30);
    
    
    var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);
    
    var data = [{category:'standard',value:Math.round(500 * ( Math.random() ))},{category:'deluxe',value:Math.round(100 * ( Math.random()))}];
    
    var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");
    
      arc.append("path")
      .attr("d", path)
      .attr("fill", function(d,i) { return color(i); });
    
    
      arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { console.log(d) ; return d.data.category; });
    
    
}



setInterval(pie,2000)