Tributary inlet

_.md

[ Launch: Tributary inlet ] 11122966 by MasterAM
[ Launch: Tributary inlet ] 10932495 by ekimed

arvadaPayments.csv

config.json

{"description":"Tributary inlet","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}},"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/BDq3SD5.png"}

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 + ")");


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

g.append("text")
.attr("transform", function(d){ return "translate(" + arc.centroid(d) +")"; })
.attr("text-anchor", "middle")
.text(function(d){ return d[i].payments; });