d3-filters example

_.md

[ Launch: d3-filters example ] 4964540 by enjalot

config.json

{"description":"d3-filters example","endpoint":"","display":"svg","public":true,"require":[{"name":"d3-filters","url":"https://raw.github.com/seliopou/d3-filters/master/d3-filters.js"}],"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":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/x36isBR.png"}

inlet.js

//example usage of d3-filters library by @sleiopou
//https://github.com/seliopou/d3-filters

var neither = 0;
var A = 0.75;
var B = 0.5;
var both = 0;

var svg = d3.select("svg");
var defs = svg.append('defs');

svg.append("rect")
.attr({
  width: "100%",
  height: "100%",
  //fill: "#FFFFFF"
})

defs.selectAll('rect')
      .data(['yellow', 'cyan', 'magenta', 'blue'])
    .enter().append('rect')
      .attr('fill', function(d) { return d; })
      .attr('id', function(d) { return d; })
      .attr('width', 265)
      .attr('height', 100)
      .attr('x', function(d,i) { return 100 + i * 100 })
      .attr('y', function(d,i) { return 100 + i * 20 + 40 })
      //.attr('x', function(d) { return 1.5 * Math.floor(Math.random() * 100); })
      //.attr('y', function(d) { return 1.5 * Math.floor(Math.random() * 100); });

  var merge = d3.filters.composite.arithmetic(neither, A, B, both)
    .id('yellow')
    .id('cyan')
    .id('magenta')
    .id('blue');

  defs.append('filter')
    .attr('id', 'composite')
    .attr('x', '0%')
    .attr('y', '0%')
    .call(merge);

  svg.append('use')
    .attr('filter', 'url(#composite)')
    .attr('height', 200)
    .attr('width', 200);