#Super Formulas
####Old Implementation: 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!
####New Additions: We edited the Super Formulas from above so that when you click the main shape, it would alternate between a circle and a square. This was done in hopes of being used in the Force Layout, as an animation for each node.
xxxxxxxxxx
<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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.superformula.v0.min.js"></script>
<script>
var size = 1000;
var shape = "circle"
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("circle")
.size(size * 50)
.segments(360);
var node = d3.superformula()
.type("circle")
.size(size * 25)
.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", node)
.on("click", click);
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (shape == "circle") {
shape = "square";
d3.select(".big").transition().duration(500).attr("d", big.type("square"));
return;
} else {
shape = "circle";
d3.select(".big").transition().duration(500).attr("d", node.type("circle"));
return;
}
}
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/d3.superformula.v0.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/d3.superformula.v0.min.js