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/parallel/parallel.html ADDED Viewed

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+    <title>Parallel Coordinates</title>
+    <style type="text/css">
+svg {
+  font: 10px sans-serif;
+}
+.background path {
+  fill: none;
+  stroke: #ccc;
+  stroke-opacity: .4;
+  shape-rendering: crispEdges;
+}
+.foreground path {
+  fill: none;
+  stroke: steelblue;
+  stroke-opacity: .7;
+}
+.brush .extent {
+  fill-opacity: .3;
+  stroke: #fff;
+  shape-rendering: crispEdges;
+}
+.axis line, .axis path {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+.axis text {
+  text-shadow: 0 1px 0 #fff;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.csv.js"></script>
+    <script type="text/javascript">
+var m = [30, 10, 10, 10],
+    w = 960 - m[1] - m[3],
+    h = 500 - m[0] - m[2];
+var x = d3.scale.ordinal().rangePoints([0, w], 1),
+    y = {};
+var line = d3.svg.line(),
+    axis = d3.svg.axis().orient("left"),
+    background,
+    foreground;
+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] + ")");
+d3.csv("cars.csv", function(cars) {
+  // Extract the list of dimensions and create a scale for each.
+  x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
+    return d != "name" && (y[d] = d3.scale.linear()
+        .domain(d3.extent(cars, function(p) { return +p[d]; }))
+        .range([h, 0]));
+  }));
+  // Add grey background lines for context.
+  background = svg.append("g")
+      .attr("class", "background")
+    .selectAll("path")
+      .data(cars)
+    .enter().append("path")
+      .attr("d", path);
+  // Add blue foreground lines for focus.
+  foreground = svg.append("g")
+      .attr("class", "foreground")
+    .selectAll("path")
+      .data(cars)
+    .enter().append("path")
+      .attr("d", path);
+  // Add a group element for each dimension.
+  var g = svg.selectAll(".dimension")
+      .data(dimensions)
+    .enter().append("g")
+      .attr("class", "dimension")
+      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });
+  // Add an axis and title.
+  g.append("g")
+      .attr("class", "axis")
+      .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
+    .append("text")
+      .attr("text-anchor", "middle")
+      .attr("y", -9)
+      .text(String);
+  // Add and store a brush for each axis.
+  g.append("g")
+      .attr("class", "brush")
+      .each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
+    .selectAll("rect")
+      .attr("x", -8)
+      .attr("width", 16);
+});
+// Returns the path for a given data point.
+function path(d) {
+  return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
+}
+// Handles a brush event, toggling the display of foreground lines.
+function brush() {
+  var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
+      extents = actives.map(function(p) { return y[p].brush.extent(); });
+  foreground.style("display", function(d) {
+    return actives.every(function(p, i) {
+      return extents[i][0] <= d[p] && d[p] <= extents[i][1];
+    }) ? null : "none";
+  });
+}
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/partition/partition-icicle-zoom.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Partition - Icicle</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+rect {
+  stroke: #fff;
+}
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 250,
+    x = d3.scale.linear().range([0, w]),
+    y = d3.scale.linear().range([0, h]),
+    color = d3.scale.category20c();
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+var partition = d3.layout.partition()
+    .value(function(d) { return d.size; });
+d3.json("../data/flare.json", function(json) {
+  var rect = vis.data([json]).selectAll("rect")
+      .data(partition.nodes)
+    .enter().append("rect")
+      .attr("x", function(d) { return x(d.x); })
+      .attr("y", function(d) { return y(d.y); })
+      .attr("width", function(d) { return x(d.dx); })
+      .attr("height", function(d) { return y(d.dy); })
+      .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
+      .on("click", click);
+  function click(d) {
+    x.domain([d.x, d.x + d.dx]);
+    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
+    rect.transition()
+      .duration(750)
+      .attr("x", function(d) { return x(d.x); })
+      .attr("y", function(d) { return y(d.y); })
+      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
+      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
+  }
+});
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Partition - Icicle</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+rect {
+  stroke: #fff;
+}
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 250,
+    color = d3.scale.category20c();
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+var partition = d3.layout.partition()
+    .size([w, h])
+    .value(function(d) { return d.size; });
+d3.json("../data/flare.json", function(json) {
+  vis.data([json]).selectAll("rect")
+      .data(partition.nodes)
+    .enter().append("rect")
+      .attr("x", function(d) { return d.x; })
+      .attr("y", function(d) { return d.y; })
+      .attr("width", function(d) { return d.dx; })
+      .attr("height", function(d) { return d.dy; })
+      .style("fill", function(d) { return color((d.children ? d : d.parent).name); });
+});
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/partition/partition-sunburst-zoom.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Partition - Sunburst</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+path {
+  stroke: #fff;
+  fill-rule: evenodd;
+}
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 700,
+    r = Math.min(w, h) / 2,
+    x = d3.scale.linear().range([0, 2 * Math.PI]),
+    y = d3.scale.sqrt().range([0, r]),
+    color = d3.scale.category20c();
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h)
+  .append("g")
+    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
+var partition = d3.layout.partition()
+    .value(function(d) { return d.size; });
+var arc = d3.svg.arc()
+    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
+    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
+    .innerRadius(function(d) { return Math.max(0, y(d.y)); })
+    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
+d3.json("../data/flare.json", function(json) {
+  var path = vis.data([json]).selectAll("path")
+      .data(partition.nodes)
+    .enter().append("path")
+      .attr("d", arc)
+      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
+      .on("click", click);
+  function click(d) {
+    path.transition()
+      .duration(750)
+      .attrTween("d", arcTween(d));
+  }
+});
+// Interpolate the scales!
+function arcTween(d) {
+  var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
+      yd = d3.interpolate(y.domain(), [d.y, 1]),
+      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
+  return function(d, i) {
+    return i
+        ? function(t) { return arc(d); }
+        : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
+  };
+}
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Partition - Sunburst</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="../button.css"/>
+  </head>
+  <body>
+    <div id="chart">
+      <button id="size" class="first">
+        Size
+      </button
+      ><button id="count" class="active last">
+        Count
+      </button><p>
+    </div>
+    <script type="text/javascript" src="partition-sunburst.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,72 @@
+var w = 960,
+    h = 700,
+    r = Math.min(w, h) / 2,
+    color = d3.scale.category20c();
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h)
+  .append("g")
+    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
+var partition = d3.layout.partition()
+    .sort(null)
+    .size([2 * Math.PI, r * r])
+    .value(function(d) { return 1; });
+var arc = d3.svg.arc()
+    .startAngle(function(d) { return d.x; })
+    .endAngle(function(d) { return d.x + d.dx; })
+    .innerRadius(function(d) { return Math.sqrt(d.y); })
+    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
+d3.json("../data/flare.json", function(json) {
+  var path = vis.data([json]).selectAll("path")
+      .data(partition.nodes)
+    .enter().append("path")
+      .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
+      .attr("d", arc)
+      .attr("fill-rule", "evenodd")
+      .style("stroke", "#fff")
+      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
+      .each(stash);
+  d3.select("#size").on("click", function() {
+    path
+        .data(partition.value(function(d) { return d.size; }))
+      .transition()
+        .duration(1500)
+        .attrTween("d", arcTween);
+    d3.select("#size").classed("active", true);
+    d3.select("#count").classed("active", false);
+  });
+  d3.select("#count").on("click", function() {
+    path
+        .data(partition.value(function(d) { return 1; }))
+      .transition()
+        .duration(1500)
+        .attrTween("d", arcTween);
+    d3.select("#size").classed("active", false);
+    d3.select("#count").classed("active", true);
+  });
+});
+// Stash the old values for transition.
+function stash(d) {
+  d.x0 = d.x;
+  d.dx0 = d.dx;
+}
+// Interpolate the arcs in data space.
+function arcTween(a) {
+  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
+  return function(t) {
+    var b = i(t);
+    a.x0 = b.x;
+    a.dx0 = b.dx;
+    return arc(b);
+  };
+}

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

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Pie Chart</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+body {
+  font: 10px sans-serif;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var w = 400,
+    h = 400,
+    r = Math.min(w, h) / 2,
+    data = d3.range(10).map(Math.random).sort(d3.descending),
+    color = d3.scale.category20(),
+    arc = d3.svg.arc().outerRadius(r),
+    donut = d3.layout.pie();
+var vis = d3.select("body").append("svg")
+    .data([data])
+    .attr("width", w)
+    .attr("height", h);
+var arcs = vis.selectAll("g.arc")
+    .data(donut)
+  .enter().append("g")
+    .attr("class", "arc")
+    .attr("transform", "translate(" + r + "," + r + ")");
+var paths = arcs.append("path")
+    .attr("fill", function(d, i) { return color(i); });
+paths.transition()
+    .ease("bounce")
+    .duration(2000)
+    .attrTween("d", tweenPie);
+paths.transition()
+    .ease("elastic")
+    .delay(function(d, i) { return 2000 + i * 50; })
+    .duration(750)
+    .attrTween("d", tweenDonut);
+function tweenPie(b) {
+  b.innerRadius = 0;
+  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
+  return function(t) {
+    return arc(i(t));
+  };
+}
+function tweenDonut(b) {
+  b.innerRadius = r * .6;
+  var i = d3.interpolate({innerRadius: 0}, b);
+  return function(t) {
+    return arc(i(t));
+  };
+}
+    </script>
+  </body>
+</html>