var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("background", "white")
    .text("a simple tooltip");


var svg = d3.select('body').append('svg')
  .attr('height',h)
  .attr('width',w)


var circles = svg.selectAll('circle')
    .data(data.nodes)
    .enter()
  .append('circle')
    .attr('cx', function (d) { return d.x })
    .attr('cy', function (d) { return d.y })
    .attr('r', function (d) { return d.amount/50 })
    .attr('fill', function (d) { return "blue" })
    .attr('stroke','yellow')
    .attr('stroke-width',0)
      .on('mouseover',function() {
        d3.select(this)
          .transition()
          .duration(1000)
          .attr('stroke-width',5)
          .attr('opacity',1)
          svg.selectAll('circle')
          .attr('opacity',0);
          svg.selectAll('line')
          .attr('opacity',0)
      })

      .on('mouseout',function () {
        d3.select(this)
          .transition()
          .duration(1000)
          .attr('stroke-width',0)
          svg.selectAll("circle") .attr("opacity", 1)
          svg.selectAll('line')
          .attr('opacity',1)
      })



d3.select("body")
    .selectAll('div')
          .on("mouseover", function(d){tooltip.text(d); return tooltip.style("visibility", "visible");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");})