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

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <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;
+  margin: 0;
+}
+path.line {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1.5px;
+}
+path.area {
+  fill: #e7e7e7;
+}
+.axis path, .axis line {
+  fill: none;
+  stroke: #fff;
+  shape-rendering: crispEdges;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [20, 20, 20, 20],
+    w = 960 - m[1] - m[3],
+    h = 140 - m[0] - m[2],
+    parse = d3.time.format("%b %Y").parse;
+// Scales. Note the inverted domain for the y-scale: bigger is up!
+var x = d3.time.scale().range([0, w]),
+    y = d3.scale.linear().range([h, 0]);
+// X-axis.
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .tickSize(-h);
+// An area generator, for the light fill.
+var area = d3.svg.area()
+    .interpolate("monotone")
+    .x(function(d) { return x(d.date); })
+    .y0(h)
+    .y1(function(d) { return y(d.price); });
+// A line generator, for the dark stroke.
+var line = d3.svg.line()
+    .interpolate("monotone")
+    .x(function(d) { return x(d.date); })
+    .y(function(d) { return y(d.price); });
+d3.csv("../data/stocks.csv", function(data) {
+  // Nest values by symbol.
+  var symbols = d3.nest()
+      .key(function(d) { return d.symbol; })
+      .entries(data);
+  // Parse dates and numbers. We assume values are sorted by date.
+  // Also compute the maximum price per symbol, needed for the y-domain.
+  symbols.forEach(function(s) {
+    s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
+    s.maxPrice = d3.max(s.values, function(d) { return d.price; });
+  });
+  // Compute the minimum and maximum date across symbols.
+  x.domain([
+    d3.min(symbols, function(d) { return d.values[0].date; }),
+    d3.max(symbols, function(d) { return d.values[d.values.length - 1].date; })
+  ]);
+  // Add an SVG element for each symbol, with the desired dimensions and margin.
+  var svg = d3.select("body").selectAll("svg")
+      .data(symbols)
+    .enter().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] + ")");
+  // Add the area path elements. Note: the y-domain is set per element.
+  svg.append("path")
+      .attr("class", "area")
+      .attr("d", function(d) { y.domain([0, d.maxPrice]); return area(d.values); });
+  // Add the x-axis.
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + h + ")")
+      .call(xAxis);
+  // Add the line path elements. Note: the y-domain is set per element.
+  svg.append("path")
+      .attr("class", "line")
+      .attr("d", function(d) { y.domain([0, d.maxPrice]); return line(d.values); });
+  // Add a small label for the symbol name.
+  svg.append("text")
+      .attr("x", w - 6)
+      .attr("y", h - 6)
+      .attr("text-anchor", "end")
+      .text(function(d) { return d.key; });
+});
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.time.js"></script>
+    <style type="text/css">
+body {
+  font: 10px sans-serif;
+}
+.axis line, .axis path {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [20, 40, 20, 40],
+    w = 960 - m[1] - m[3],
+    h = 500 - m[0] - m[2],
+    x = d3.time.scale().domain([new Date(2011, 07, 01), new Date(2011, 07, 08)]).range([0, w]),
+    y = d3.scale.sqrt().range([h, 0]);
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .ticks(d3.time.days)
+    .tickFormat(d3.time.format("%m/%d"));
+var yAxis = d3.svg.axis()
+    .scale(y);
+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("g")
+    .attr("class", "bottom axis")
+    .attr("transform", "translate(0," + h + ")")
+    .call(xAxis.orient("bottom"));
+svg.append("g")
+    .attr("class", "top axis")
+    .call(xAxis.orient("top"));
+svg.append("g")
+    .attr("class", "left axis")
+    .call(yAxis.orient("left"));
+svg.append("g")
+    .attr("class", "right axis")
+    .attr("transform", "translate(" + w + ",0)")
+    .call(yAxis.orient("right"));
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <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;
+  margin: 0;
+}
+path.line {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1.5px;
+}
+path.area {
+  fill: #e7e7e7;
+}
+.axis {
+  shape-rendering: crispEdges;
+}
+.x.axis line {
+  stroke: #fff;
+}
+.x.axis .minor {
+  stroke-opacity: .5;
+}
+.x.axis path {
+  display: none;
+}
+.y.axis line, .y.axis path {
+  fill: none;
+  stroke: #000;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var m = [20, 40, 20, 20],
+    w = 960 - m[1] - m[3],
+    h = 140 - m[0] - m[2],
+    parse = d3.time.format("%b %Y").parse;
+// Scales. Note the inverted domain for the y-scale: bigger is up!
+var x = d3.time.scale().range([0, w]),
+    y = d3.scale.linear().range([h, 0]);
+// Axes.
+var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
+    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");
+// An area generator, for the light fill.
+var area = d3.svg.area()
+    .interpolate("monotone")
+    .x(function(d) { return x(d.date); })
+    .y0(h)
+    .y1(function(d) { return y(d.price); });
+// A line generator, for the dark stroke.
+var line = d3.svg.line()
+    .interpolate("monotone")
+    .x(function(d) { return x(d.date); })
+    .y(function(d) { return y(d.price); });
+d3.csv("../data/stocks.csv", function(data) {
+  // Filter to one symbol; the S&P 500.
+  var values = data.filter(function(d) {
+    return d.symbol == "S&P 500";
+  });
+  // Parse dates and numbers. We assume values are sorted by date.
+  values.forEach(function(d) {
+    d.date = parse(d.date);
+    d.price = +d.price;
+  });
+  // Compute the minimum and maximum date, and the maximum price.
+  x.domain([values[0].date, values[values.length - 1].date]);
+  y.domain([0, d3.max(values, function(d) { return d.price; })]);
+  // Add an SVG element with the desired dimensions and margin.
+  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] + ")");
+  // Add the clip path.
+  svg.append("clipPath")
+      .attr("id", "clip")
+    .append("rect")
+      .attr("width", w)
+      .attr("height", h);
+  // Add the area path.
+  svg.append("path")
+      .attr("class", "area")
+      .attr("clip-path", "url(#clip)")
+      .attr("d", area(values));
+  // Add the x-axis.
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + h + ")")
+      .call(xAxis);
+  // Add the y-axis.
+  svg.append("g")
+      .attr("class", "y axis")
+      .attr("transform", "translate(" + w + ",0)")
+      .call(yAxis);
+  // Add the line path.
+  svg.append("path")
+      .attr("class", "line")
+      .attr("clip-path", "url(#clip)")
+      .attr("d", line(values));
+  // Add a small label for the symbol name.
+  svg.append("text")
+      .attr("x", w - 6)
+      .attr("y", h - 6)
+      .attr("text-anchor", "end")
+      .text(values[0].symbol);
+  // On click, update the x-axis.
+  svg.on("click", function() {
+    var n = values.length - 1,
+        i = Math.floor(Math.random() * n / 2),
+        j = i + Math.floor(Math.random() * n / 2) + 1;
+    x.domain([values[i].date, values[j].date]);
+    var t = svg.transition().duration(750);
+    t.select(".x.axis").call(xAxis);
+    t.select(".area").attr("d", area(values));
+    t.select(".line").attr("d", line(values));
+  });
+});
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,21 @@
+@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;
+}
+path {
+  fill: #ccc;
+  stroke: #fff;
+}
+div {
+  width: 960px;
+}

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

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Azimuthal 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>
+    <link type="text/css" rel="stylesheet" href="azimuthal.css"/>
+  </head>
+  <body>
+    <h3>Azimuthal Projection</h3>
+    <script type="text/javascript" src="azimuthal.js"></script><p>
+    <select id="mode">
+      <option value="stereographic">stereographic</option>
+      <option value="orthographic">orthographic</option>
+      <option value="equidistant">equidistant</option>
+      <option value="gnomonic">gnomonic</option>
+      <option value="equalarea">equalarea</option>
+    </select>
+    <div id="lon">origin.longitude: <span>0</span></div>
+    <div id="lat">origin.latitude: <span>0</span></div><p>
+    <div id="scale">scale: <span>240</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);
+    circle.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);
+    circle.origin(origin);
+    refresh();
+  }
+});
+$("#scale").slider({
+  min: 0,
+  max: 3000,
+  value: 240,
+  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();
+  }
+});
+$("#mode").change(function() {
+  var mode = $(this).val();
+  xy.mode(mode);
+  refresh(500);
+});
+    </script>
+  </body>
+</html>