Permalink
Browse files

Merge branch 'superformula'

  • Loading branch information...
2 parents 7dc7fe4 + 920d980 commit 4964bb6362b875a7175dc289a66d93857a62e5dc @mbostock mbostock committed Jun 11, 2011
Showing with 281 additions and 24 deletions.
  1. +4 −11 d3.js
  2. +2 −2 d3.min.js
  3. +103 −0 examples/dot/dot-superformula.html
  4. +70 −0 examples/superformula/superformula.html
  5. +98 −0 examples/superformula/superformula.js
  6. +1 −1 src/core/core.js
  7. +3 −10 src/svg/symbol.js
View
15 d3.js
@@ -1,4 +1,4 @@
-(function(){d3 = {version: "1.20.0"}; // semver
+(function(){d3 = {version: "1.20.1"}; // semver
if (!Date.now) Date.now = function() {
return +new Date;
};
@@ -3349,16 +3349,6 @@ d3.svg.symbol = function() {
return symbol;
};
-// TODO cross-diagonal?
-d3.svg.symbolTypes = [
- "circle",
- "cross",
- "diamond",
- "square",
- "triangle-down",
- "triangle-up"
-];
-
function d3_svg_symbolSize() {
return 64;
}
@@ -3367,6 +3357,7 @@ function d3_svg_symbolType() {
return "circle";
}
+// TODO cross-diagonal?
var d3_svg_symbols = {
"circle": function(size) {
var r = Math.sqrt(size / Math.PI);
@@ -3426,6 +3417,8 @@ var d3_svg_symbols = {
}
};
+d3.svg.symbolTypes = d3.keys(d3_svg_symbols);
+
var d3_svg_symbolSqrt3 = Math.sqrt(3),
d3_svg_symbolTan30 = Math.tan(30 * Math.PI / 180);
})()
View

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Dot Plot</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+body {
+ font: 10px sans-serif;
+}
+
+path.dot {
+ fill: white;
+ stroke-width: 1.5px;
+}
+
+rect {
+ fill: none;
+ stroke: black;
+ shape-rendering: crispEdges;
+}
+
+.x line, .y line {
+ stroke: #ccc;
+ shape-rendering: crispEdges;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var data = d3.range(100).map(function(i) {
+ return {x: i / 99, y: Math.random()};
+});
+
+var w = 450,
+ h = 450,
+ p = 20,
+ x = d3.scale.linear().range([0, w]),
+ y = d3.scale.linear().range([h, 0]),
+ superformula = d3.scale.ordinal().range(d3.svg.superformulaTypes),
+ color = d3.scale.category10();
+
+var vis = d3.select("body")
+ .append("svg:svg")
+ .attr("width", w + p * 2)
+ .attr("height", h + p * 2)
+ .append("svg:g")
+ .attr("transform", "translate(" + p + "," + p + ")");
+
+var xrule = vis.selectAll("g.x")
+ .data(x.ticks(10))
+ .enter().append("svg:g")
+ .attr("class", "x");
+
+xrule.append("svg:line")
+ .attr("x1", x)
+ .attr("x2", x)
+ .attr("y1", 0)
+ .attr("y2", h);
+
+xrule.append("svg:text")
+ .attr("x", x)
+ .attr("y", h + 3)
+ .attr("dy", ".71em")
+ .attr("text-anchor", "middle")
+ .text(x.tickFormat(10));
+
+var yrule = vis.selectAll("g.y")
+ .data(y.ticks(10))
+ .enter().append("svg:g")
+ .attr("class", "y");
+
+yrule.append("svg:line")
+ .attr("x1", 0)
+ .attr("x2", w)
+ .attr("y1", y)
+ .attr("y2", y);
+
+yrule.append("svg:text")
+ .attr("x", -3)
+ .attr("y", y)
+ .attr("dy", ".35em")
+ .attr("text-anchor", "end")
+ .text(y.tickFormat(10));
+
+vis.append("svg:rect")
+ .attr("width", w)
+ .attr("height", h);
+
+vis.selectAll("path.dot")
+ .data(data)
+ .enter().append("svg:path")
+ .attr("class", "dot")
+ .attr("stroke", function(d, i) { return color(i); })
+ .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
+ .attr("d", d3.svg.superformula()
+ .type(function(d, i) { return superformula(i); }));
+
+ </script>
+ </body>
+</html>
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+ <html>
+ <head>
+ <title>Superformula</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="superformula.js"></script>
+ <style type="text/css">
+
+path {
+ stroke-width: 1.5px;
+}
+
+path.small {
+ fill: steelblue;
+}
+
+path.big {
+ stroke: #666;
+ fill: #ddd;
+}
+
+path.small:hover {
+ stroke: steelblue;
+ fill: lightsteelblue;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var size = 1000;
+
+var x = d3.scale.ordinal()
+ .domain(superformulaTypes)
+ .rangePoints([0, 960], 1);
+
+var svg = d3.select("body").append("svg:svg")
+ .attr("width", 960)
+ .attr("height", 500);
+
+var small = superformula()
+ .type(String)
+ .size(size);
+
+var big = superformula()
+ .type("square")
+ .size(size * 50)
+ .segments(360);
+
+svg.selectAll("a")
+ .data(superformulaTypes)
+ .enter().append("svg:a")
+ .attr("xlink:title", String)
+ .attr("transform", function(d, i) { return "translate("+ x(d) + ",40)"; })
+ .append("svg: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("svg:path")
+ .attr("class", "big")
+ .attr("transform", "translate(450,250)")
+ .attr("d", big);
+
+ </script>
+ </body>
+</html>
@@ -0,0 +1,98 @@
+(function() {
+ var _symbol = d3.svg.symbol(),
+ _line = d3.svg.line();
+
+ superformula = function() {
+ var type = _symbol.type(),
+ size = _symbol.size(),
+ segments = size,
+ params = {};
+
+ function superformula(d, i) {
+ var n, p = _superformulaTypes[type.call(this, d, i)];
+ for (n in params) p[n] = params[n].call(this, d, i);
+ return _superformulaPath(p, segments.call(this, d, i), Math.sqrt(size.call(this, d, i)));
+ }
+
+ superformula.type = function(x) {
+ if (!arguments.length) return type;
+ type = d3.functor(x);
+ return superformula;
+ };
+
+ superformula.param = function(name, value) {
+ if (arguments.length < 2) return params[name];
+ params[name] = d3.functor(value);
+ return superformula;
+ };
+
+ // size of superformula in square pixels
+ superformula.size = function(x) {
+ if (!arguments.length) return size;
+ size = d3.functor(x);
+ return superformula;
+ };
+
+ // number of discrete line segments
+ superformula.segments = function(x) {
+ if (!arguments.length) return segments;
+ segments = d3.functor(x);
+ return superformula;
+ };
+
+ return superformula;
+ };
+
+ function _superformulaPath(params, n, diameter) {
+ var i = -1,
+ dt = 2 * Math.PI / n,
+ t,
+ r = 0,
+ x,
+ y,
+ points = [];
+
+ while (++i < n) {
+ t = params.m * (i * dt - Math.PI) / 4;
+ t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2)
+ + Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1);
+ if (t > r) r = t;
+ points.push(t);
+ }
+
+ r = diameter * Math.SQRT1_2 / r;
+ i = -1; while (++i < n) {
+ x = (t = points[i] * r) * Math.cos(i * dt);
+ y = t * Math.sin(i * dt);
+ points[i] = [Math.abs(x) < 1e-6 ? 0 : x, Math.abs(y) < 1e-6 ? 0 : y];
+ }
+
+ return _line(points) + "Z";
+ }
+
+ var _superformulaTypes = {
+ 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: 1000, n2: 400, n3: 400, a: 1, b: 1},
+ hexagon: {m: 6, n1: 1000, 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: 1000, 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}
+ };
+
+ superformulaTypes = d3.keys(_superformulaTypes);
+})();
View
@@ -1 +1 @@
-d3 = {version: "1.20.0"}; // semver
+d3 = {version: "1.20.1"}; // semver
View
@@ -24,16 +24,6 @@ d3.svg.symbol = function() {
return symbol;
};
-// TODO cross-diagonal?
-d3.svg.symbolTypes = [
- "circle",
- "cross",
- "diamond",
- "square",
- "triangle-down",
- "triangle-up"
-];
-
function d3_svg_symbolSize() {
return 64;
}
@@ -42,6 +32,7 @@ function d3_svg_symbolType() {
return "circle";
}
+// TODO cross-diagonal?
var d3_svg_symbols = {
"circle": function(size) {
var r = Math.sqrt(size / Math.PI);
@@ -101,5 +92,7 @@ var d3_svg_symbols = {
}
};
+d3.svg.symbolTypes = d3.keys(d3_svg_symbols);
+
var d3_svg_symbolSqrt3 = Math.sqrt(3),
d3_svg_symbolTan30 = Math.tan(30 * Math.PI / 180);

0 comments on commit 4964bb6

Please sign in to comment.