Created
July 13, 2017 15:26
-
-
Save beemyfriend/51ea519b6523334051a3fef2634476b3 to your computer and use it in GitHub Desktop.
Flubbering Symbols
This file contains hidden or 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
| <head></head> | |
| <body></body> | |
| <script src='https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js'></script> | |
| <script src="https://unpkg.com/[email protected]"></script> | |
| <script> | |
| var symbol_size = 300, | |
| width = 1000, | |
| height = 600, | |
| duration = 3000; | |
| var star_generator = d3.symbol() | |
| .type(d3.symbolStar) | |
| .size(symbol_size); | |
| var wye_generator = d3.symbol() | |
| .type(d3.symbolWye) | |
| .size(symbol_size); | |
| var diamond_generator = d3.symbol() | |
| .type(d3.symbolDiamond) | |
| .size(symbol_size); | |
| var cross_generator = d3.symbol() | |
| .type(d3.symbolCross) | |
| .size(symbol_size); | |
| var star = star_generator(), | |
| wye = wye_generator(), | |
| diamond = diamond_generator(), | |
| cross = cross_generator(); | |
| var star2wye = flubber.interpolate(star, wye), | |
| wye2diamond = flubber.interpolate(wye, diamond), | |
| diamond2cross = flubber.interpolate(diamond, cross), | |
| cross2star = flubber.interpolate(cross, star); | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .at({width: width, height: height}) | |
| svg.append('path#onlyone') | |
| .at({d: star}) | |
| .st({fill: 'purple'}) | |
| .translate([width/4, height/4]); | |
| function s2w(){ | |
| d3.select('#onlyone') | |
| .transition() | |
| .duration(duration) | |
| .attrTween('d', function(){return star2wye}) | |
| .translate([width/4, (height*3/4)]) | |
| .st({fill: 'blue'}) | |
| .on('end', w2d); | |
| } | |
| function w2d(){ | |
| d3.select('#onlyone') | |
| .transition() | |
| .duration(duration) | |
| .attrTween('d', function(){return wye2diamond}) | |
| .translate([(width * 3/4), (height*3/4)]) | |
| .st({fill: 'green'}) | |
| .on('end', d2c); | |
| } | |
| function d2c(){ | |
| d3.select('#onlyone') | |
| .transition() | |
| .duration(duration) | |
| .attrTween('d', function(){return diamond2cross}) | |
| .translate([(width * 3/4), height/4]) | |
| .st({fill: 'red'}) | |
| .on('end', c2s); | |
| } | |
| function c2s(){ | |
| d3.select('#onlyone') | |
| .transition() | |
| .duration(duration) | |
| .attrTween('d', function(){return cross2star}) | |
| .translate([width/4, height/4]) | |
| .st({fill: 'purple'}) | |
| .on('end', s2w); | |
| } | |
| s2w(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment