mbostock/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    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!

  
## d3.superformula.min.js
(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)})();

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>