Pie chart

_.md

[ Launch: Tributary inlet ] 6511236 by roundrobin

config.json

{"description":"Pie chart","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ZRVKiNO.png"}

inlet.js

var width = 519;
var height = 260;
var color1 = "#133D88";
var color2 = "#F2F8FF";
var color3 = "#D6EAFE";
var color4 = "#6C6C6C";
var lineColor = "#6F6B68";

var r = 100;
var color = [color3, color1];


g =g.append("g")
  .attr({
    transform: "translate("+[37,64]+")",
    "class": "group"
  });


g.append("rect")
.attr({
    width: width,
    height: height,
    fill: "#ddd"
});


var data = [{"label":"one", "value" : 20}, 
        {"label":"two", "value" : 80}];

var vis = g.data([data])
.append("g")           
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")rotate(90)");

var arc = d3.svg.arc()
.outerRadius(r);

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

var circleAttrs = {
  r: 43,
  cx: width / 2,
  cy: height / 2,
  fill: color2
};

g.append("circle")
.attr(circleAttrs);

var arcs = vis.selectAll("g.slice") 
.data(pie)                      
.enter()                        
.append("g")            
.attr("class", "slice");

arcs.append("path")
.attr("opacity", "0.9")
.attr("fill", function(d, i) { return color[i]; } )
.attr("d", arc);                                    


var targets = [];

arcs.append("circle")                            
.attr("transform", function(d) {           
  d.innerRadius = 31;
  d.outerRadius = r;
  var point = arc.centroid(d);
  targets.push(point);
  return "translate(" + point + ")"; 
})
.attr({"r":"5", fill: lineColor
});
 

//Line 
vis.selectAll('.lines')
.data(targets)
.enter()
.append('polyline')
  .attr({
    points: function(d, i){

     var returningPoint = [-30,169];
     var newPoint = [-40,-159];
     
      
      var targetPoint = returningPoint
      if(i == 0){
        targetPoint = newPoint;
      }

     return ""+d+" "+targetPoint;
    }
  }).style({
    stroke: lineColor,
   "stroke-width":1,
    "stroke-dasharray": "2,2",
   fill: "3"
});

/// Rest of the chart
var sibRadius = 27;
var strokeColor = "#D17E00";
var siblingAttrs = {
  r: sibRadius,
  cx: sibRadius,
  cy: height - sibRadius - (height / 2 - r),
  fill: color1,
  stroke: strokeColor,
  "stroke-width": 5
};

g.append("circle")
.attr(siblingAttrs);

g.append("circle")
.attr(siblingAttrs)
.attr({
  cx: width - sibRadius
}); 

var textAttr = {
  fill: "#000000",
  x : sibRadius,
  y: 99,
  "font-size": 16,
  "font-family": "Arial",
  "text-anchor": "middle"
};

g.append('text')
.text("New Visitors")
.attr(textAttr);

var textAttr2 = {
  x : width - sibRadius
};

g.append('text')
.text("Returning Visitors")
.attr(textAttr)
.attr(textAttr2);


var textAttr3 = {
  y: 135,
  "font-size" : 30
};

g.append('text')
.text("72%")
.attr(textAttr)
.attr(textAttr3);

g.append('text')
.text("72%")
.attr(textAttr)
.attr(textAttr2)
.attr(textAttr3);