Super Formulas

#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.

<!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="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);

</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