RubyGems - picky-statistics - Versions diffs - 4.0.0pre3 → 4.0.0pre5 - Mend

picky-statistics 4.0.0pre3 → 4.0.0pre5

Files changed (596) hide show

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stack.css ADDED Viewed

@@ -0,0 +1,7 @@
+#chart {
+  font: 10px sans-serif;
+}
+line {
+  stroke: black;
+}

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stack.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Stacked Bar Chart</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <script type="text/javascript" src="stream_layers.js"></script>
+    <link type="text/css" rel="stylesheet" href="../button.css"/>
+    <link type="text/css" rel="stylesheet" href="stack.css"/>
+  </head>
+  <body>
+    <div id="chart">
+      <button id="group" class="first" onclick="transitionGroup()">
+        Group
+      </button
+      ><button id="stack" class="active last" onclick="transitionStack()">
+        Stack
+      </button><p>
+    </div>
+    <script type="text/javascript" src="stack.js"></script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stack.js ADDED Viewed

@@ -0,0 +1,119 @@
+var n = 4, // number of layers
+    m = 64, // number of samples per layer
+    data = d3.layout.stack()(stream_layers(n, m, .1)),
+    color = d3.interpolateRgb("#aad", "#556");
+var p = 20,
+    w = 960,
+    h = 500 - .5 - p,
+    mx = m,
+    my = d3.max(data, function(d) {
+      return d3.max(d, function(d) {
+        return d.y0 + d.y;
+      });
+    }),
+    mz = d3.max(data, function(d) {
+      return d3.max(d, function(d) {
+        return d.y;
+      });
+    }),
+    x = function(d) { return d.x * w / mx; },
+    y0 = function(d) { return h - d.y0 * h / my; },
+    y1 = function(d) { return h - (d.y + d.y0) * h / my; },
+    y2 = function(d) { return d.y * h / mz; }; // or `my` to not rescale
+var vis = d3.select("#chart")
+  .append("svg")
+    .attr("width", w)
+    .attr("height", h + p);
+var layers = vis.selectAll("g.layer")
+    .data(data)
+  .enter().append("g")
+    .style("fill", function(d, i) { return color(i / (n - 1)); })
+    .attr("class", "layer");
+var bars = layers.selectAll("g.bar")
+    .data(function(d) { return d; })
+  .enter().append("g")
+    .attr("class", "bar")
+    .attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
+bars.append("rect")
+    .attr("width", x({x: .9}))
+    .attr("x", 0)
+    .attr("y", h)
+    .attr("height", 0)
+  .transition()
+    .delay(function(d, i) { return i * 10; })
+    .attr("y", y1)
+    .attr("height", function(d) { return y0(d) - y1(d); });
+var labels = vis.selectAll("text.label")
+    .data(data[0])
+  .enter().append("text")
+    .attr("class", "label")
+    .attr("x", x)
+    .attr("y", h + 6)
+    .attr("dx", x({x: .45}))
+    .attr("dy", ".71em")
+    .attr("text-anchor", "middle")
+    .text(function(d, i) { return i; });
+vis.append("line")
+    .attr("x1", 0)
+    .attr("x2", w - x({x: .1}))
+    .attr("y1", h)
+    .attr("y2", h);
+function transitionGroup() {
+  var group = d3.selectAll("#chart");
+  group.select("#group")
+      .attr("class", "first active");
+  group.select("#stack")
+      .attr("class", "last");
+  group.selectAll("g.layer rect")
+    .transition()
+      .duration(500)
+      .delay(function(d, i) { return (i % m) * 10; })
+      .attr("x", function(d, i) { return x({x: .9 * ~~(i / m) / n}); })
+      .attr("width", x({x: .9 / n}))
+      .each("end", transitionEnd);
+  function transitionEnd() {
+    d3.select(this)
+      .transition()
+        .duration(500)
+        .attr("y", function(d) { return h - y2(d); })
+        .attr("height", y2);
+  }
+}
+function transitionStack() {
+  var stack = d3.select("#chart");
+  stack.select("#group")
+      .attr("class", "first");
+  stack.select("#stack")
+      .attr("class", "last active");
+  stack.selectAll("g.layer rect")
+    .transition()
+      .duration(500)
+      .delay(function(d, i) { return (i % m) * 10; })
+      .attr("y", y1)
+      .attr("height", function(d) { return y0(d) - y1(d); })
+      .each("end", transitionEnd);
+  function transitionEnd() {
+    d3.select(this)
+      .transition()
+        .duration(500)
+        .attr("x", 0)
+        .attr("width", x({x: .9}));
+  }
+}

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stream.css ADDED Viewed

@@ -0,0 +1,3 @@
+#chart {
+  font: 10px sans-serif;
+}

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stream.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Streamgraph</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <script type="text/javascript" src="stream_layers.js"></script>
+    <link type="text/css" rel="stylesheet" href="../button.css"/>
+    <link type="text/css" rel="stylesheet" href="stream.css"/>
+  </head>
+  <body>
+    <div id="chart">
+      <button class="first last" onclick="transition()">
+        Update
+      </button><p>
+    </div>
+    <script type="text/javascript" src="stream.js"></script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stream.js ADDED Viewed

@@ -0,0 +1,42 @@
+var n = 20, // number of layers
+    m = 200, // number of samples per layer
+    data0 = d3.layout.stack().offset("wiggle")(stream_layers(n, m)),
+    data1 = d3.layout.stack().offset("wiggle")(stream_layers(n, m)),
+    color = d3.interpolateRgb("#aad", "#556");
+var w = 960,
+    h = 500,
+    mx = m - 1,
+    my = d3.max(data0.concat(data1), function(d) {
+      return d3.max(d, function(d) {
+        return d.y0 + d.y;
+      });
+    });
+var area = d3.svg.area()
+    .x(function(d) { return d.x * w / mx; })
+    .y0(function(d) { return h - d.y0 * h / my; })
+    .y1(function(d) { return h - (d.y + d.y0) * h / my; });
+var vis = d3.select("#chart")
+  .append("svg")
+    .attr("width", w)
+    .attr("height", h);
+vis.selectAll("path")
+    .data(data0)
+  .enter().append("path")
+    .style("fill", function() { return color(Math.random()); })
+    .attr("d", area);
+function transition() {
+  d3.selectAll("path")
+      .data(function() {
+        var d = data1;
+        data1 = data0;
+        return data0 = d;
+      })
+    .transition()
+      .duration(2500)
+      .attr("d", area);
+}

data/lib/picky-statistics/application/javascripts/d3/examples/stream/stream_layers.js ADDED Viewed

@@ -0,0 +1,33 @@
+/* Inspired by Lee Byron's test data generator. */
+function stream_layers(n, m, o) {
+  if (arguments.length < 3) o = 0;
+  function bump(a) {
+    var x = 1 / (.1 + Math.random()),
+        y = 2 * Math.random() - .5,
+        z = 10 / (.1 + Math.random());
+    for (var i = 0; i < m; i++) {
+      var w = (i / m - y) * z;
+      a[i] += x * Math.exp(-w * w);
+    }
+  }
+  return d3.range(n).map(function() {
+      var a = [], i;
+      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
+      for (i = 0; i < 5; i++) bump(a);
+      return a.map(stream_index);
+    });
+}
+/* Another layer generator using gamma distributions. */
+function stream_waves(n, m) {
+  return d3.range(n).map(function(i) {
+    return d3.range(m).map(function(j) {
+        var x = 20 * j / m - i / 3;
+        return 2 * x * Math.exp(-.5 * x);
+      }).map(stream_index);
+    });
+}
+function stream_index(d, i) {
+  return {x: i, y: Math.max(0, d)};
+}

data/lib/picky-statistics/application/javascripts/d3/examples/superformula/dot.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dot Plot</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="superformula.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]),
+    type = d3.scale.ordinal().range(superformulaTypes),
+    color = d3.scale.category10();
+var vis = d3.select("body")
+  .append("svg")
+    .attr("width", w + p * 2)
+    .attr("height", h + p * 2)
+  .append("g")
+    .attr("transform", "translate(" + p + "," + p + ")");
+var xrule = vis.selectAll("g.x")
+    .data(x.ticks(10))
+  .enter().append("g")
+    .attr("class", "x");
+xrule.append("line")
+    .attr("x1", x)
+    .attr("x2", x)
+    .attr("y1", 0)
+    .attr("y2", h);
+xrule.append("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("g")
+    .attr("class", "y");
+yrule.append("line")
+    .attr("x1", 0)
+    .attr("x2", w)
+    .attr("y1", y)
+    .attr("y2", y);
+yrule.append("text")
+    .attr("x", -3)
+    .attr("y", y)
+    .attr("dy", ".35em")
+    .attr("text-anchor", "end")
+    .text(y.tickFormat(10));
+vis.append("rect")
+    .attr("width", w)
+    .attr("height", h);
+vis.selectAll("path.dot")
+    .data(data)
+  .enter().append("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", superformula()
+    .type(function(d, i) { return type(i); }));
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/superformula/explorer.html ADDED Viewed

@@ -0,0 +1,120 @@
+<!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;
+  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>
+  </head>
+  <body>
+    <div id="controls"></div>
+    <script type="text/javascript">
+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 = 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>
+  </body>
+</html>