public
Last active

Superformula Explorer

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
<!DOCTYPE html>
<meta charset="utf-8">
<title>Superformula</title>
<style>
 
path {
stroke-width: 1.5px;
stroke: #666;
fill: #ddd;
}
 
#controls {
position: absolute;
width: 240px;
font: 10px sans-serif;
}
 
#controls span,
#controls label {
position: relative;
top: -5px;
padding: 5px;
display: inline-block;
width: 20px;
}
 
#controls button {
font: 10px sans-serif;
padding: 5px;
width: 70px;
}
 
</style>
<div id="controls"></div>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/superformula/superformula.js"></script>
<script>
 
var types = {
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}
};
 
var format = d3.format(".4n"),
scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]);
 
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
 
var shape = d3.superformula()
.type("asterisk")
.size(100000)
.segments(3600);
 
var path = svg.append("path")
.attr("class", "big")
.attr("transform", "translate(480,250)")
.attr("d", shape);
 
var control = d3.select("#controls").selectAll("div")
.data(d3.entries(types.asterisk))
.enter().append("div")
.attr("id", function(d) { return d.key; });
 
control.append("label")
.text(function(d) { return d.key; });
 
control.append("input")
.attr("type", "range")
.attr("max", 1000)
.attr("min", 0)
.property("value", function(d) { return scale(d.value); })
.on("change", function(d) {
var v = scale.invert(this.value);
path.attr("d", shape.param(d.key, v));
d3.select(this.nextSibling).text(format(v));
});
 
control.append("span")
.text(function(d) { return format(d.value); });
 
var types = d3.select("#controls").append("div").selectAll("button")
.data(d3.entries(types))
.enter().append("button")
.text(function(d) { return d.key; })
.on("click", function(d) {
for (var param in d.value) {
var control = d3.select("#" + param);
control.select("input").property("value", scale(d.value[param]));
control.select("span").text(format(d.value[param]));
shape.param(param, d.value[param]);
}
path.attr("d", shape);
});
 
</script>
readme.md
Markdown

Hi . . . love the SF Explorer, but FYI, it seems to be broken in Chrome 28.0.1500.71 / Mac OS X 10.7.5. Basically, the outer frame and HTML load-in fine, but the Explorer content itself does not -- just a big blank box. Works fine in Safari, so apparently a Chrome-specific issue.

And the Tweening version works as expected, so something must have 'fallen off' between versions . . .

Thought you might want to know.

It turns out that it has to do with the fact that you are now serving the superformula.js script from raw.github.org, and Chrome won't read the Mime Type and process the script. So nothing wrong with the code, just where it is being served from.

Here is a comment I found on code.google.com:

"GitHub does in fact serve assets from raw.github.org with a X-Content-Type-Options: nosniff header. Chrome matches the behavior of IE8, 9, and 10 on this page, and Gecko will match if/when they fix https://bugzilla.mozilla.org/show_bug.cgi?id=471020.

[I've] had conversations with GitHub folks about this issue in particular; they don't actually want folks serving files from raw.github.org, which is why they serve resources with the 'nosniff' header. They'd prefer that you set up something on GitHub Pages."

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.