depth blur prototype

_.md

[ Launch: Tributary inlet ] 7c3872d712b4d16f3960 by poezn

assets.svg

config.json

{"description":"depth blur prototype","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"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,"controls":{},"inline-console":true,"thumbnail":"http://i.imgur.com/SRr2Kpf.png"}

inlet.js

var currentLevel = 1;

function renderBlur() {
	g.selectAll(".blur")
	.transition()
    .duration(500)
    .attr({
      "stdDeviation": function(d, i) {
        if (i+1 != currentLevel) {
	        return Math.abs(currentLevel - (i + 1)) * 10;
        }
        return 0;
      }
    })

};

renderBlur();

d3.selectAll(".level1 rect")
.on("click", function() {
	console.log(1); currentLevel = 1; renderBlur();
  d3.selectAll(".level1 rect").transition().style("opacity", 1)
  d3.selectAll(".level2 rect, .level3 rect").transition().style("opacity", 0.5)
});

d3.selectAll(".level2 rect")
.on("click", function() {
	console.log(2); currentLevel = 2; renderBlur();
  d3.selectAll(".level2 rect").transition().style("opacity", 1)
  d3.selectAll(".level1 rect, .level3 rect").transition().style("opacity", 0.5)
});

d3.selectAll(".level3 rect")
.on("click", function() {
	console.log(3); currentLevel = 3; renderBlur();
  d3.selectAll(".level3 rect").transition().style("opacity", 1)
  d3.selectAll(".level1 rect, .level2 rect").transition().style("opacity", 0.5)
});

styles.css

#display {
	background-color: #FFF;
}

.level1 {
	fill: #4A90E2;
}

.level2 {
	fill: #F5A623;
}

.level3 {
	fill: #B8E986;
}

.level1 rect {
  filter: url(#svgBlur1);
}

.level2 rect {
  filter: url(#svgBlur2);
}

.level3 rect {
  filter: url(#svgBlur3);
}