[ Launch: d3-filters example ] c5fcb64496c8475b3d4e by rickdg
[ Launch: d3-filters example ] 4964540 by enjalot
-
-
Save rickdg/c5fcb64496c8475b3d4e to your computer and use it in GitHub Desktop.
d3-filters example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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","ajax-caching":true} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment