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/azimuthal/azimuthal.js ADDED Viewed

@@ -0,0 +1,29 @@
+var xy = d3.geo.azimuthal().scale(240).mode("stereographic"),
+    circle = d3.geo.greatCircle(),
+    path = d3.geo.path().projection(xy),
+    svg = d3.select("body").append("svg");
+d3.json("../data/world-countries.json", function(collection) {
+  svg.selectAll("path")
+      .data(collection.features)
+    .enter().append("path")
+      .attr("d", function(d) { return path(circle.clip(d)); })
+    .append("title")
+      .text(function(d) { return d.properties.name; });
+});
+function refresh(duration) {
+  var p = svg.selectAll("path");
+  if (duration) p = p.transition().duration(duration);
+  p.attr("d", function(d) { return path(circle.clip(d)); });
+  d3.select("#lon span")
+      .text(xy.origin()[0]);
+  d3.select("#lat span")
+      .text(xy.origin()[1]);
+  d3.select("#scale span")
+      .text(xy.scale());
+  d3.select("#translate-x span")
+      .text(xy.translate()[0]);
+  d3.select("#translate-y span")
+      .text(xy.translate()[1]);
+}

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

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hierarchical Bar Chart</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+text {
+  font: 10px sans-serif;
+}
+rect.background {
+  fill: white;
+}
+.axis {
+  shape-rendering: crispEdges;
+}
+.axis path, .axis line {
+  fill: none;
+  stroke: #000;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [20, 20, 20, 120], // top right bottom left
+    w = 960 - m[1] - m[3], // width
+    h = 500 - m[0] - m[2], // height
+    x = d3.scale.linear().range([0, w]),
+    y = 20, // bar height
+    z = d3.scale.ordinal().range(["steelblue", "#ccc"]), // bar color
+    duration = 750,
+    delay = 25;
+var hierarchy = d3.layout.partition()
+    .value(function(d) { return d.size; });
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("top");
+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("class", "background")
+    .attr("width", w)
+    .attr("height", h)
+    .on("click", up);
+svg.append("g")
+    .attr("class", "x axis");
+svg.append("g")
+    .attr("class", "y axis")
+  .append("line")
+    .attr("y1", "100%");
+d3.json("../data/flare.json", function(root) {
+  hierarchy.nodes(root);
+  x.domain([0, root.value]).nice();
+  down(root, 0);
+});
+function down(d, i) {
+  if (!d.children || this.__transition__) return;
+  var end = duration + d.children.length * delay;
+  // Mark any currently-displayed bars as exiting.
+  var exit = svg.selectAll(".enter").attr("class", "exit");
+  // Entering nodes immediately obscure the clicked-on bar, so hide it.
+  exit.selectAll("rect").filter(function(p) { return p === d; })
+      .style("fill-opacity", 1e-6);
+  // Enter the new bars for the clicked-on data.
+  // Per above, entering bars are immediately visible.
+  var enter = bar(d)
+      .attr("transform", stack(i))
+      .style("opacity", 1);
+  // Have the text fade-in, even though the bars are visible.
+  // Color the bars as parents; they will fade to children if appropriate.
+  enter.select("text").style("fill-opacity", 1e-6);
+  enter.select("rect").style("fill", z(true));
+  // Update the x-scale domain.
+  x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();
+  // Update the x-axis.
+  svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);
+  // Transition entering bars to their new position.
+  var enterTransition = enter.transition()
+      .duration(duration)
+      .delay(function(d, i) { return i * delay; })
+      .attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; });
+  // Transition entering text.
+  enterTransition.select("text").style("fill-opacity", 1);
+  // Transition entering rects to the new x-scale.
+  enterTransition.select("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .style("fill", function(d) { return z(!!d.children); });
+  // Transition exiting bars to fade out.
+  var exitTransition = exit.transition()
+      .duration(duration)
+      .style("opacity", 1e-6)
+      .remove();
+  // Transition exiting bars to the new x-scale.
+  exitTransition.selectAll("rect").attr("width", function(d) { return x(d.value); });
+  // Rebind the current node to the background.
+  svg.select(".background").data([d]).transition().duration(end); d.index = i;
+}
+function up(d) {
+  if (!d.parent || this.__transition__) return;
+  var end = duration + d.children.length * delay;
+  // Mark any currently-displayed bars as exiting.
+  var exit = svg.selectAll(".enter").attr("class", "exit");
+  // Enter the new bars for the clicked-on data's parent.
+  var enter = bar(d.parent)
+      .attr("transform", function(d, i) { return "translate(0," + y * i * 1.2 + ")"; })
+      .style("opacity", 1e-6);
+  // Color the bars as appropriate.
+  // Exiting nodes will obscure the parent bar, so hide it.
+  enter.select("rect")
+      .style("fill", function(d) { return z(!!d.children); })
+    .filter(function(p) { return p === d; })
+      .style("fill-opacity", 1e-6);
+  // Update the x-scale domain.
+  x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();
+  // Update the x-axis.
+  svg.selectAll(".x.axis").transition().duration(duration).call(xAxis);
+  // Transition entering bars to fade in over the full duration.
+  var enterTransition = enter.transition()
+      .duration(end)
+      .style("opacity", 1);
+  // Transition entering rects to the new x-scale.
+  // When the entering parent rect is done, make it visible!
+  enterTransition.select("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });
+  // Transition exiting bars to the parent's position.
+  var exitTransition = exit.selectAll("g").transition()
+      .duration(duration)
+      .delay(function(d, i) { return i * delay; })
+      .attr("transform", stack(d.index));
+  // Transition exiting text to fade out.
+  exitTransition.select("text")
+      .style("fill-opacity", 1e-6);
+  // Transition exiting rects to the new scale and fade to parent color.
+  exitTransition.select("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .style("fill", z(true));
+  // Remove exiting nodes when the last child has finished transitioning.
+  exit.transition().duration(end).remove();
+  // Rebind the current parent to the background.
+  svg.select(".background").data([d.parent]).transition().duration(end);;
+}
+// Creates a set of bars for the given data node, at the specified index.
+function bar(d) {
+  var bar = svg.insert("g", ".y.axis")
+      .attr("class", "enter")
+      .attr("transform", "translate(0,5)")
+    .selectAll("g")
+      .data(d.children)
+    .enter().append("g")
+      .style("cursor", function(d) { return !d.children ? null : "pointer"; })
+      .on("click", down);
+  bar.append("text")
+      .attr("x", -6)
+      .attr("y", y / 2)
+      .attr("dy", ".35em")
+      .attr("text-anchor", "end")
+      .text(function(d) { return d.name; });
+  bar.append("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .attr("height", y);
+  return bar;
+}
+// A stateful closure for stacking bars horizontally.
+function stack(i) {
+  var x0 = 0;
+  return function(d) {
+    var tx = "translate(" + x0 + "," + y * i * 1.2 + ")";
+    x0 += x(d.value);
+    return tx;
+  };
+}
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bar Chart</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.csv.js"></script>
+    <style type="text/css">
+body {
+  font: 10px sans-serif;
+}
+.bar rect {
+  fill: steelblue;
+}
+.bar text.value {
+  fill: white;
+}
+.axis {
+  shape-rendering: crispEdges;
+}
+.axis path {
+  fill: none;
+}
+.x.axis line {
+  stroke: #fff;
+  stroke-opacity: .8;
+}
+.y.axis path {
+  stroke: black;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [30, 10, 10, 30],
+    w = 960 - m[1] - m[3],
+    h = 930 - m[0] - m[2];
+var format = d3.format(",.0f");
+var x = d3.scale.linear().range([0, w]),
+    y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
+var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
+    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
+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("sample-data.csv", function(data) {
+  // Parse numbers, and sort by value.
+  data.forEach(function(d) { d.value = +d.value; });
+  data.sort(function(a, b) { return b.value - a.value; });
+  // Set the scale domain.
+  x.domain([0, d3.max(data, function(d) { return d.value; })]);
+  y.domain(data.map(function(d) { return d.name; }));
+  var bar = svg.selectAll("g.bar")
+      .data(data)
+    .enter().append("g")
+      .attr("class", "bar")
+      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
+  bar.append("rect")
+      .attr("width", function(d) { return x(d.value); })
+      .attr("height", y.rangeBand());
+  bar.append("text")
+      .attr("class", "value")
+      .attr("x", function(d) { return x(d.value); })
+      .attr("y", y.rangeBand() / 2)
+      .attr("dx", -3)
+      .attr("dy", ".35em")
+      .attr("text-anchor", "end")
+      .text(function(d) { return format(d.value); });
+  svg.append("g")
+      .attr("class", "x axis")
+      .call(xAxis);
+  svg.append("g")
+      .attr("class", "y axis")
+      .call(yAxis);
+});
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/bar/sample-data.csv ADDED Viewed

@@ -0,0 +1,53 @@
+name,value
+AL,4708708
+AK,698473
+AZ,6595778
+AR,2889450
+CA,36961664
+CO,5024748
+CT,3518288
+DE,885122
+DC,599657
+FL,18537969
+GA,9829211
+HI,1295178
+ID,1545801
+IL,12910409
+IN,6423113
+IA,3007856
+KS,2818747
+KY,4314113
+LA,4492076
+ME,1318301
+MD,5699478
+MA,6593587
+MI,9969727
+MN,5266214
+MS,2951996
+MO,5987580
+MT,974989
+NE,1796619
+NV,2643085
+NH,1324575
+NJ,8707739
+NM,2009671
+NY,19541453
+NC,9380884
+ND,646844
+OH,11542645
+OK,3687050
+OR,3825657
+PA,12604767
+RI,1053209
+SC,4561242
+SD,812383
+TN,6296254
+TX,24782302
+UT,2784572
+VT,621760
+VA,7882590
+WA,6664195
+WV,1819777
+WI,5654774
+WY,544270
+PR,3967288

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

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Bonne Projection</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geo.js"></script>
+    <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
+    <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
+    <style type="text/css">
+@import url("../../lib/jquery-ui/jquery-ui.css");
+body, .ui-widget {
+  font: 14px Helvetica Neue;
+}
+svg {
+  width: 960px;
+  height: 500px;
+  border: solid 1px #ccc;
+  background: #eee;
+}
+line {
+  stroke: brown;
+  stroke-dasharray: 4,2;
+}
+path {
+  fill: #ccc;
+  stroke: #fff;
+}
+div {
+  width: 960px;
+}
+    </style>
+  </head>
+  <body>
+    <h3>Bonne Projection</h3>
+    <script type="text/javascript">
+// Our projection.
+var xy = d3.geo.bonne(),
+    path = d3.geo.path().projection(xy);
+var countries = d3.select("body").append("svg")
+    .attr("id", "countries");
+d3.json("../data/world-countries.json", function(collection) {
+  countries.selectAll("path")
+      .data(collection.features)
+    .enter().append("path")
+      .attr("d", path)
+    .append("title")
+      .text(function(d) { return d.properties.name; });
+});
+function refresh() {
+  countries.selectAll("path")
+      .attr("d", path);
+  d3.select("#lon span")
+      .text(xy.origin()[0]);
+  d3.select("#lat span")
+      .text(xy.origin()[1]);
+  d3.select("#parallel span")
+      .text(xy.parallel());
+  d3.select("#scale span")
+      .text(xy.scale());
+  d3.select("#translate-x span")
+      .text(xy.translate()[0]);
+  d3.select("#translate-y span")
+      .text(xy.translate()[1]);
+}
+    </script><p>
+    <div id="lon">origin.longitude: <span>0</span></div>
+    <div id="lat">origin.latitude: <span>0</span></div><p>
+    <div id="parallel">parallel: <span>45</span></div><p>
+    <div id="scale">scale: <span>200</span></div><p>
+    <div id="translate-x">translate.x: <span>480</span></div>
+    <div id="translate-y">translate.y: <span>250</span></div>
+    <script type="text/javascript">
+$("#lon").slider({
+  min: -180,
+  max: 180,
+  step: 1e-1,
+  value: 0,
+  slide: function(event, ui) {
+    var origin = xy.origin();
+    origin[0] = ui.value;
+    xy.origin(origin);
+    refresh();
+  }
+});
+$("#lat").slider({
+  min: -90,
+  max: 90,
+  step: 1e-1,
+  value: 0,
+  slide: function(event, ui) {
+    var origin = xy.origin();
+    origin[1] = ui.value;
+    xy.origin(origin);
+    refresh();
+  }
+});
+$("#parallel").slider({
+  min: 0,
+  max: 90,
+  value: 45,
+  slide: function(event, ui) {
+    xy.parallel(ui.value);
+    refresh();
+  }
+});
+$("#scale").slider({
+  min: 0,
+  max: 800,
+  value: 200,
+  slide: function(event, ui) {
+    xy.scale(ui.value);
+    refresh();
+  }
+});
+$("#translate-x").slider({
+  min: -2000,
+  max: 2000,
+  value: 480,
+  slide: function(event, ui) {
+    var translate = xy.translate();
+    translate[0] = ui.value;
+    xy.translate(translate);
+    refresh();
+  }
+});
+$("#translate-y").slider({
+  min: -2000,
+  max: 2000,
+  value: 250,
+  slide: function(event, ui) {
+    var translate = xy.translate();
+    translate[1] = ui.value;
+    xy.translate(translate);
+    refresh();
+  }
+});
+    </script>
+  </body>
+</html>