donut example

_.md

[ Launch: donut example ] 8654015 by gerred

config.json

{"description":"donut example","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/GUbOoh7.png"}

inlet.js

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .value(function(d) { return Math.log(d.value) })
.sort(function(d) { return -d.sort_order });

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 20);

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

var data = [
  {name: 'Methodology', value: 91881, sort_order: 1}, 
  {name: 'Recon', value: 13989, sort_order: 2},
  {name: 'Delivery', value: 695, sort_order: 3},
  {name: 'Exploit', value: 3247, sort_order: 4},
  {name: 'Beaconing', value: 3247, sort_order: 5},
  {name: 'C2', value: 34, sort_order: 6}

]

var path = svg.datum(data).selectAll("path")
.data(pie)
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.on('mouseover', mouseover)
.on('mouseleave', mouseleave);

svg.append('text')
.style('text-anchor', 'middle')

function mouseover(d) {
  console.log(d)
   d3.select("text")
	.text(function() { return d.data.name + ' (' + d.data.value +  ')'})
}

function mouseleave(d) {
   d3.select("text")
	.text('')
}