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/bubble/bubble.css ADDED Viewed

@@ -0,0 +1,8 @@
+circle {
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+text {
+  font: 10px sans-serif;
+}

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

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Bubble Chart</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <link type="text/css" rel="stylesheet" href="bubble.css"/>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript" src="bubble.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,46 @@
+var r = 960,
+    format = d3.format(",d"),
+    fill = d3.scale.category20c();
+var bubble = d3.layout.pack()
+    .sort(null)
+    .size([r, r]);
+var vis = d3.select("#chart").append("svg")
+    .attr("width", r)
+    .attr("height", r)
+    .attr("class", "bubble");
+d3.json("../data/flare.json", function(json) {
+  var node = vis.selectAll("g.node")
+      .data(bubble.nodes(classes(json))
+      .filter(function(d) { return !d.children; }))
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+  node.append("title")
+      .text(function(d) { return d.className + ": " + format(d.value); });
+  node.append("circle")
+      .attr("r", function(d) { return d.r; })
+      .style("fill", function(d) { return fill(d.packageName); });
+  node.append("text")
+      .attr("text-anchor", "middle")
+      .attr("dy", ".3em")
+      .text(function(d) { return d.className.substring(0, d.r / 3); });
+});
+// Returns a flattened hierarchy containing all leaf nodes under the root.
+function classes(root) {
+  var classes = [];
+  function recurse(name, node) {
+    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
+    else classes.push({packageName: name, className: node.name, value: node.size});
+  }
+  recurse(null, root);
+  return {children: classes};
+}

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

@@ -0,0 +1,10 @@
+.bullet { font: 10px sans-serif; }
+.bullet .marker { stroke: #000; stroke-width: 2px; }
+.bullet .tick line { stroke: #666; stroke-width: .5px; }
+.bullet .range.s0 { fill: #eee; }
+.bullet .range.s1 { fill: #ddd; }
+.bullet .range.s2 { fill: #ccc; }
+.bullet .measure.s0 { fill: lightsteelblue; }
+.bullet .measure.s1 { fill: steelblue; }
+.bullet .title { font-size: 14px; font-weight: bold; }
+.bullet .subtitle { fill: #999; }

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

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

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

@@ -0,0 +1,53 @@
+var w = 960,
+    h = 50,
+    m = [5, 40, 20, 120]; // top right bottom left
+var chart = d3.chart.bullet()
+    .width(w - m[1] - m[3])
+    .height(h - m[0] - m[2]);
+d3.json("bullets.json", function(data) {
+  var vis = d3.select("#chart").selectAll("svg")
+      .data(data)
+    .enter().append("svg")
+      .attr("class", "bullet")
+      .attr("width", w)
+      .attr("height", h)
+    .append("g")
+      .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
+      .call(chart);
+  var title = vis.append("g")
+      .attr("text-anchor", "end")
+      .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");
+  title.append("text")
+      .attr("class", "title")
+      .text(function(d) { return d.title; });
+  title.append("text")
+      .attr("class", "subtitle")
+      .attr("dy", "1em")
+      .text(function(d) { return d.subtitle; });
+  chart.duration(1000);
+  window.transition = function() {
+    vis.map(randomize).call(chart);
+  };
+});
+function randomize(d) {
+  if (!d.randomizer) d.randomizer = randomizer(d);
+  d.ranges = d.ranges.map(d.randomizer);
+  d.markers = d.markers.map(d.randomizer);
+  d.measures = d.measures.map(d.randomizer);
+  return d;
+}
+function randomizer(d) {
+  var k = d3.max(d.ranges) * .2;
+  return function(d) {
+    return Math.max(0, d + k * (Math.random() - .5));
+  };
+}

data/lib/picky-statistics/application/javascripts/d3/examples/bullet/bullets.json ADDED Viewed

@@ -0,0 +1,7 @@
+[
+  {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
+  {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
+  {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
+  {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
+  {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
+]

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

@@ -0,0 +1,9 @@
+.node {
+  font: 10px sans-serif;
+}
+.link {
+  stroke: steelblue;
+  stroke-opacity: .4;
+  fill: none;
+}

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

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Hierarchical Edge Bundling (Radial Tree)</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <script type="text/javascript" src="packages.js"></script>
+    <link type="text/css" rel="stylesheet" href="bundle-radial.css"/>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript" src="bundle-radial.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,50 @@
+var r = 960 / 2,
+    splines = [];
+var cluster = d3.layout.cluster()
+    .size([360, r - 120])
+    .sort(null)
+    .value(function(d) { return d.size; });
+var bundle = d3.layout.bundle();
+var line = d3.svg.line.radial()
+    .interpolate("bundle")
+    .tension(.85)
+    .radius(function(d) { return d.y; })
+    .angle(function(d) { return d.x / 180 * Math.PI; });
+var vis = d3.select("#chart").append("svg")
+    .attr("width", r * 2)
+    .attr("height", r * 2)
+  .append("g")
+    .attr("transform", "translate(" + r + "," + r + ")");
+d3.json("../data/flare-imports.json", function(classes) {
+  var nodes = cluster.nodes(packages.root(classes)),
+      links = packages.imports(nodes);
+  vis.selectAll("path.link")
+      .data(splines = bundle(links))
+    .enter().append("path")
+      .attr("class", "link")
+      .attr("d", line);
+  vis.selectAll("g.node")
+      .data(nodes.filter(function(n) { return !n.children; }))
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
+    .append("text")
+      .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
+      .attr("dy", ".31em")
+      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
+      .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
+      .text(function(d) { return d.key; });
+});
+d3.select(window).on("mousemove", function() {
+  vis.selectAll("path.link")
+      .data(splines)
+      .attr("d", line.tension(Math.min(1, d3.event.clientX / 960)));
+});

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

@@ -0,0 +1,14 @@
+.cell {
+  border: solid 1px white;
+  font: 10px sans-serif;
+  line-height: 12px;
+  overflow: hidden;
+  position: absolute;
+  text-indent: 2px;
+}
+.link {
+  stroke: #000;
+  stroke-opacity: .5;
+  fill: none;
+}

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

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Hierarchical Edge Bundling (Treemap)</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <script type="text/javascript" src="../../lib/colorbrewer/colorbrewer.js"></script>
+    <script type="text/javascript" src="packages.js"></script>
+    <link type="text/css" rel="stylesheet" href="bundle-treemap.css"/>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript" src="bundle-treemap.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,53 @@
+var w = 960,
+    h = 500,
+    fill = d3.scale.ordinal().range(colorbrewer.Greys[9].slice(1, 4)),
+    stroke = d3.scale.linear().domain([0, 1e4]).range(["brown", "steelblue"]);
+var treemap = d3.layout.treemap()
+    .size([w, h])
+    .value(function(d) { return d.size; });
+var bundle = d3.layout.bundle();
+var div = d3.select("#chart").append("div")
+    .style("position", "relative")
+    .style("width", w + "px")
+    .style("height", h + "px");
+var line = d3.svg.line()
+    .interpolate("bundle")
+    .tension(.85)
+    .x(function(d) { return d.x + d.dx / 2; })
+    .y(function(d) { return d.y + d.dy / 2; });
+d3.json("../data/flare-imports.json", function(classes) {
+  var nodes = treemap.nodes(packages.root(classes)),
+      links = packages.imports(nodes);
+  div.selectAll("div")
+      .data(nodes)
+    .enter().append("div")
+      .attr("class", "cell")
+      .style("background", function(d) { return d.children ? fill(d.key) : null; })
+      .call(cell)
+      .text(function(d) { return d.children ? null : d.key; });
+  div.append("svg")
+      .attr("width", w)
+      .attr("height", h)
+      .style("position", "absolute")
+    .selectAll("path.link")
+      .data(bundle(links))
+    .enter().append("path")
+      .style("stroke", function(d) { return stroke(d[0].value); })
+      .attr("class", "link")
+      .attr("d", line);
+});
+function cell() {
+  this
+      .style("left", function(d) { return d.x + "px"; })
+      .style("top", function(d) { return d.y + "px"; })
+      .style("width", function(d) { return d.dx - 1 + "px"; })
+      .style("height", function(d) { return d.dy - 1 + "px"; });
+}

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

@@ -0,0 +1,49 @@
+(function() {
+  packages = {
+    // Lazily construct the package hierarchy from class names.
+    root: function(classes) {
+      var map = {};
+      function find(name, data) {
+        var node = map[name], i;
+        if (!node) {
+          node = map[name] = data || {name: name, children: []};
+          if (name.length) {
+            node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
+            node.parent.children.push(node);
+            node.key = name.substring(i + 1);
+          }
+        }
+        return node;
+      }
+      classes.forEach(function(d) {
+        find(d.name, d);
+      });
+      return map[""];
+    },
+    // Return a list of imports for the given array of nodes.
+    imports: function(nodes) {
+      var map = {},
+          imports = [];
+      // Compute a map from name to node.
+      nodes.forEach(function(d) {
+        map[d.name] = d;
+      });
+      // For each import, construct a link from the source to target node.
+      nodes.forEach(function(d) {
+        if (d.imports) d.imports.forEach(function(i) {
+          imports.push({source: map[d.name], target: map[i]});
+        });
+      });
+      return imports;
+    }
+  };
+})();

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

@@ -0,0 +1,35 @@
+button {
+  font: 14px Helvetica Neue;
+  background-color: #222;
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
+  background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
+  color: #fff;
+  text-rendering: optimizeLegibility;
+  text-shadow: 0 -1px 1px #222;
+  padding: 6px 10px 6px 10px;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid #222;
+  margin: 0;
+  -moz-box-shadow: 0 1px 3px #999;
+  -webkit-box-shadow: 0 1px 3px #999;
+}
+button.first {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+button.last {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+button.active {
+  background-color: rgb(65,102,133);
+}
+button:hover {
+  background-color: steelblue;
+}

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

@@ -0,0 +1,15 @@
+#chart {
+  font: 10px sans-serif;
+  shape-rendering: crispEdges;
+}
+.day {
+  fill: #fff;
+  stroke: #ccc;
+}
+.month {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2px;
+}

data/lib/picky-statistics/application/javascripts/d3/examples/calendar/dji-area.html ADDED Viewed

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DJI</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.csv.js"></script>
+    <script type="text/javascript" src="../../d3.time.js"></script>
+    <style type="text/css">
+body {
+  font: 10px sans-serif;
+}
+rect {
+  fill: #ddd;
+}
+path.area {
+  fill: #000;
+  fill-opacity: .75;
+}
+.axis, .grid {
+  shape-rendering: crispEdges;
+}
+.grid line {
+  stroke: #fff;
+}
+.grid line.minor {
+  stroke-opacity: .5;
+}
+.grid text {
+  display: none;
+}
+.axis line {
+  stroke: #000;
+}
+.grid path, .axis path {
+  display: none;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [10, 50, 20, 10],
+    w = 960 - m[1] - m[3],
+    h = 500 - m[0] - m[2],
+    parse = d3.time.format("%Y-%m-%d").parse;
+// Scales. Note the inverted domain for the y-scale: bigger is up!
+var x = d3.time.scale().range([20, w - 20]),
+    y = d3.scale.linear().range([h - 20, 20]);
+// Axes.
+var xAxis = d3.svg.axis().scale(x).orient("bottom"),
+    yAxis = d3.svg.axis().scale(y).orient("right");
+// An area generator.
+var area = d3.svg.area()
+    .x(function(d) { return x(d.Date); })
+    .y0(y(0))
+    .y1(function(d) { return y(d.Close); });
+var svg = d3.select("body").append("svg")
+    .attr("width", w + m[1] + m[3])
+    .attr("height", h + m[0] + m[2])
+  .append("g")
+    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+svg.append("rect")
+    .attr("width", w)
+    .attr("height", h);
+d3.csv("dji.csv", function(data) {
+  // Parse dates and numbers.
+  data.reverse().forEach(function(d) {
+    d.Date = parse(d.Date);
+    d.Close = +d.Close;
+  });
+  // Compute the minimum and maximum date, and the maximum price.
+  x.domain([data[0].Date, data[data.length - 1].Date]);
+  y.domain([0, d3.max(data, function(d) { return d.Close; })]);
+  svg.append("g")
+      .attr("class", "x grid")
+      .attr("transform", "translate(0," + h + ")")
+      .call(xAxis.tickSubdivide(1).tickSize(-h));
+  svg.append("g")
+      .attr("class", "y grid")
+      .attr("transform", "translate(" + w + ",0)")
+      .call(yAxis.tickSubdivide(1).tickSize(-w));
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + h + ")")
+      .call(xAxis.tickSubdivide(0).tickSize(6));
+  svg.append("g")
+      .attr("class", "y axis")
+      .attr("transform", "translate(" + w + ",0)")
+      .call(yAxis.tickSubdivide(0).tickSize(6));
+  svg.append("path")
+      .attr("class", "area")
+      .attr("d", area(data));
+});
+    </script>
+  </body>
+</html>