hove pie example -

_.md

[ Launch: ] 11154514 by hartzis
[ Launch: Tributary inlet ] 10932495 by ekimed

arvadaPayments.csv

config.json

{"description":"hove pie example - ","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"arvadaPayments.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"main.css":{"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},"main.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/3gvMepr.gif"}

inlet.js

var arvadaData = tributary.arvadaPayments

var sumPayments = d3.sum(arvadaData, function(d) {return +d.payments;});

var svg = d3.select("svg");

var width = 527,
    height = 562,
    radius = Math.min(width, height) / 2;

var outerRadius = width/2;

var colorScale = d3.scale.category20(); //built in range of 20 colors

var arc = d3.svg.arc() //creates <path> elements using arc data
	.outerRadius(width / 2)
	.innerRadius(100);

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

var g = svg.selectAll("g.arc")
	.data(pie(arvadaData))
	.enter()
	.append("g")
		.attr("class", "arc")
		.attr("transform", "translate(" + width/2 + "," + height/2 + ")");

svg.selectAll(".title")
.data([sumPayments])
.enter()
.append("text")
.attr({ x: 52,
       y: 44})
.text("Arvada Medicare Payments by Specialty");

g.append("path")
.attr("fill", function(d){return colorScale(d.data.payments);})
.attr("d", arc)

g
.append("text")
.attr("transform", function(d){ return "translate(" + arc.centroid(0) +")"; })
.attr("text-anchor", "middle")
.text(function(d){ return d.data.specialty; })
.attr('class', 'text-title');

main.css

.text-title {
  display: none;
  font-size: 12px;
}

.title{
  margin 0 auto
  height 50px
  width 300px
  font-size 40px
}

main.js

$(".title").text("Aravada Medicare Payment by Specialty");


$("g").on("hover", function(){
	$(this).find(".text-title").toggle();
});