Tributary inlet

_.md

[ Launch: Tributary inlet ] 3e12b9d9fd7570be7610 by ramnathv

app.css

/* prevents pointer events triggering on text hover*/
svg text {
  pointer-events: none;
}

config.json

{"description":"Tributary inlet","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},"app.css":{"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/2KV6nvU.png"}

inlet.js

var dataset2 = [
  {v: 5},
  {v: 10},
  {v: 20}
]
var dataset = [ 5, 10, 20, 45, 6, 25 ];

var margin = {top: 123, bottom: 20, left: 207, right: 20},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom

var svg = d3.select('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
	 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var ro = width/3, ri = ro/2

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

Scales = {}

Scales.arc = d3.svg.arc()
  .innerRadius(ri)
  .outerRadius(ro)

Scales.color = d3.scale.category20();


// DRAW PIE

var arcs = svg.selectAll("g.arc")
  .data(pie(dataset2))
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + ro + "," + ro + ")") 


arcs.append("path")
  .attr("d", Scales.arc)
  .attr("fill", function(d, i){return Scales.color(i)})
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)
  .on("click", function(d){alert(d.value)})

arcs.append("text")
  .attr("transform", function(d){
    return "translate(" + Scales.arc.centroid(d) + ")"
  })
  .text(function(d){return d.value})
  .attr("text-anchor", "middle")
  .attr("fill", "white")
  .attr("font-size", "14px")
  .attr("font-family", "Monaco")
  
  
  
  function mouseover(d){
      d3.select(this).attr('fill', 'red')
  }

  function mouseout(d, i){
    d3.select(this).attr("fill", Scales.color(i))
  }