Fader

_.md

[ Launch: Fader ] 7179273 by vitapluvia

config.json

{"description":"Fader","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}},"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,"thumbnail":"http://i.imgur.com/oDpd05H.gif"}

inlet.js

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})