var svg = d3.select("svg")
var mX = 0;
var mY = 0;
var group = svg.append("g")

group.append("rect")
    .on("mousemove", function() {
      mX = d3.mouse(this)[0];
      mY = d3.mouse(this)[1];
      d3.selectAll("rect").style({
        fill: function(d) {
          //return "#000FFF";
          return "hsl("+240+", 50%, "+mY*0.2+"%)"
      }
      })
      d3.selectAll(".indicator").select("text").text(function() {
        return "Value: " + Number((mY + 5).toFixed(2));
      })
      d3.selectAll(".indicator").select("text").attr({
        y: function() { return mY + 5 },
        x: 265
      }) 
      d3.selectAll(".indicator").selectAll("rect").attr({
        y: function() { return mY }
      })
    })
	.attr({y:50, width:150, height:240,
           x: function(d) {
             return 75
          }
          })
var g2 = group.append("g").attr("class", "indicator")
				 g2.append("text")
                 g2.append("rect").attr({x:220,y:50,height:2,width:33})
                 //g2.append("rect").attr({x:253, y:45,height:12,width:1})