Skip to content

Instantly share code, notes, and snippets.

@mbostock mbostock/.block
Last active Aug 14, 2016

Embed
What would you like to do?
Superformula Tweening
license: gpl-3.0

Christophe Viau implemented a new shape type as a D3 plugin based on superformulas. One nice property of these shapes is that you can easily tween between two shapes by simply interpolating the control points. Click on the blue shapes to try it!

(function(){function n(n,a,r){for(var e,s,o,m=-1,u=2*Math.PI/a,b=0,h=[];++m<a;)e=n.m*(m*u-Math.PI)/4,e=Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(e)/n.a),n.n2)+Math.pow(Math.abs(Math.sin(e)/n.b),n.n3)),-1/n.n1),e>b&&(b=e),h.push(e);for(b=r*Math.SQRT1_2/b,m=-1;++m<a;)s=(e=h[m]*b)*Math.cos(m*u),o=e*Math.sin(m*u),h[m]=[Math.abs(s)<1e-6?0:s,Math.abs(o)<1e-6?0:o];return t(h)+"Z"}var a=d3.svg.symbol(),t=d3.svg.line();d3.superformula=function(){function t(a,t){var u,b=r[e.call(this,a,t)];for(u in m)b[u]=m[u].call(this,a,t);return n(b,o.call(this,a,t),Math.sqrt(s.call(this,a,t)))}var e=a.type(),s=a.size(),o=s,m={};return t.type=function(n){return arguments.length?(e=d3.functor(n),t):e},t.param=function(n,a){return arguments.length<2?m[n]:(m[n]=d3.functor(a),t)},t.size=function(n){return arguments.length?(s=d3.functor(n),t):s},t.segments=function(n){return arguments.length?(o=d3.functor(n),t):o},t};var r={asterisk:{m:12,n1:.3,n2:0,n3:10,a:1,b:1},bean:{m:2,n1:1,n2:4,n3:8,a:1,b:1},butterfly:{m:3,n1:1,n2:6,n3:2,a:.6,b:1},circle:{m:4,n1:2,n2:2,n3:2,a:1,b:1},clover:{m:6,n1:.3,n2:0,n3:10,a:1,b:1},cloverFour:{m:8,n1:10,n2:-1,n3:-8,a:1,b:1},cross:{m:8,n1:1.3,n2:.01,n3:8,a:1,b:1},diamond:{m:4,n1:1,n2:1,n3:1,a:1,b:1},drop:{m:1,n1:.5,n2:.5,n3:.5,a:1,b:1},ellipse:{m:4,n1:2,n2:2,n3:2,a:9,b:6},gear:{m:19,n1:100,n2:50,n3:50,a:1,b:1},heart:{m:1,n1:.8,n2:1,n3:-8,a:1,b:.18},heptagon:{m:7,n1:1e3,n2:400,n3:400,a:1,b:1},hexagon:{m:6,n1:1e3,n2:400,n3:400,a:1,b:1},malteseCross:{m:8,n1:.9,n2:.1,n3:100,a:1,b:1},pentagon:{m:5,n1:1e3,n2:600,n3:600,a:1,b:1},rectangle:{m:4,n1:100,n2:100,n3:100,a:2,b:1},roundedStar:{m:5,n1:2,n2:7,n3:7,a:1,b:1},square:{m:4,n1:100,n2:100,n3:100,a:1,b:1},star:{m:5,n1:30,n2:100,n3:100,a:1,b:1},triangle:{m:3,n1:100,n2:200,n3:200,a:1,b:1}};d3.superformulaTypes=d3.keys(r)})();
<!DOCTYPE html>
<meta charset="utf-8">
<title>Superformula</title>
<style>
path {
stroke-width: 1.5px;
}
.small {
fill: steelblue;
}
.big {
stroke: #666;
fill: #ddd;
}
.small:hover {
stroke: steelblue;
fill: lightsteelblue;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.superformula.min.js"></script>
<script>
var size = 1000;
var x = d3.scale.ordinal()
.domain(d3.superformulaTypes)
.rangePoints([0, 960], 1);
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var small = d3.superformula()
.type(function(d) { return d; })
.size(size);
var big = d3.superformula()
.type("square")
.size(size * 50)
.segments(360);
svg.selectAll("a")
.data(d3.superformulaTypes)
.enter().append("a")
.attr("xlink:title", String)
.attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
.append("path")
.attr("class", "small")
.attr("d", small)
.on("mousedown", function() { d3.select(this).style("fill", "aliceblue"); })
.on("mouseup", function() { d3.select(this).style("fill", null); })
.on("click", function(d) { d3.select(".big").transition().duration(500).attr("d", big.type(d)); });
svg.append("path")
.attr("class", "big")
.attr("transform", "translate(450,250)")
.attr("d", big);
</script>
@uttamg911

This comment has been minimized.

Copy link

uttamg911 commented Nov 6, 2012

Hi I have observed a really strange thing in the the tooltips of the shapes.
If you click on the small blue shape thrice or more times ( click before the big one completely redraws )and move the pointer to adjacent shape ( before the big one completely redraws ), it is showing "Monday/ Tuesday ..." as the tooltip. Is that a bug? I am really curious to know the reason behind the behavior.

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.