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

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>Force-Directed Graph</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+circle.node {
+  cursor: pointer;
+  stroke: #000;
+  stroke-width: .5px;
+}
+line.link {
+  fill: none;
+  stroke: #9ecae1;
+  stroke-width: 1.5px;
+}
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 500,
+    node,
+    link,
+    root;
+var force = d3.layout.force()
+    .on("tick", tick)
+    .charge(function(d) { return d._children ? -d.size / 100 : -30; })
+    .linkDistance(function(d) { return d.target._children ? 80 : 30; })
+    .size([w, h]);
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+d3.json("../data/flare.json", function(json) {
+  root = json;
+  root.fixed = true;
+  root.x = w / 2;
+  root.y = h / 2;
+  update();
+});
+function update() {
+  var nodes = flatten(root),
+      links = d3.layout.tree().links(nodes);
+  // Restart the force layout.
+  force
+      .nodes(nodes)
+      .links(links)
+      .start();
+  // Update the links…
+  link = vis.selectAll("line.link")
+      .data(links, function(d) { return d.target.id; });
+  // Enter any new links.
+  link.enter().insert("line", ".node")
+      .attr("class", "link")
+      .attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  // Exit any old links.
+  link.exit().remove();
+  // Update the nodes…
+  node = vis.selectAll("circle.node")
+      .data(nodes, function(d) { return d.id; })
+      .style("fill", color);
+  node.transition()
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; });
+  // Enter any new nodes.
+  node.enter().append("circle")
+      .attr("class", "node")
+      .attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; })
+      .attr("r", function(d) { return d.children ? 4.5 : Math.sqrt(d.size) / 10; })
+      .style("fill", color)
+      .on("click", click)
+      .call(force.drag);
+  // Exit any old nodes.
+  node.exit().remove();
+}
+function tick() {
+  link.attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  node.attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+}
+// Color leaf nodes orange, and packages white or blue.
+function color(d) {
+  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
+}
+// Toggle children on click.
+function click(d) {
+  if (d.children) {
+    d._children = d.children;
+    d.children = null;
+  } else {
+    d.children = d._children;
+    d._children = null;
+  }
+  update();
+}
+// Returns a list of all nodes under the root.
+function flatten(root) {
+  var nodes = [], i = 0;
+  function recurse(node) {
+    if (node.children) node.size = node.children.reduce(function(p, v) { return p + recurse(v); }, 0);
+    if (!node.id) node.id = ++i;
+    nodes.push(node);
+    return node.size;
+  }
+  root.size = recurse(root);
+  return nodes;
+}
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Force-Directed Layout (Dynamic)</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+rect {
+  fill: #fff;
+}
+.node {
+  fill: #000;
+}
+.cursor {
+  fill: none;
+  stroke: brown;
+  pointer-events: none;
+}
+.link {
+  stroke: #999;
+}
+    </style>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 500,
+    fill = d3.scale.category20(),
+    nodes = [],
+    links = [];
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+vis.append("rect")
+    .attr("width", w)
+    .attr("height", h);
+var force = d3.layout.force()
+    .distance(30)
+    .nodes(nodes)
+    .links(links)
+    .size([w, h]);
+var cursor = vis.append("circle")
+    .attr("r", 30)
+    .attr("transform", "translate(-100,-100)")
+    .attr("class", "cursor");
+force.on("tick", function() {
+  vis.selectAll("line.link")
+      .attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  vis.selectAll("circle.node")
+      .attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+});
+vis.on("mousemove", function() {
+  cursor.attr("transform", "translate(" + d3.svg.mouse(this) + ")");
+});
+vis.on("mousedown", function() {
+  var point = d3.svg.mouse(this),
+      node = {x: point[0], y: point[1]},
+      n = nodes.push(node);
+  // add links to any nearby nodes
+  nodes.forEach(function(target) {
+    var x = target.x - node.x,
+        y = target.y - node.y;
+    if (Math.sqrt(x * x + y * y) < 30) {
+      links.push({source: node, target: target});
+    }
+  });
+  restart();
+});
+restart();
+function restart() {
+  force.start();
+  vis.selectAll("line.link")
+      .data(links)
+    .enter().insert("line", "circle.node")
+      .attr("class", "link")
+      .attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  vis.selectAll("circle.node")
+      .data(nodes)
+    .enter().insert("circle", "circle.cursor")
+      .attr("class", "node")
+      .attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; })
+      .attr("r", 4.5)
+      .call(force.drag);
+}
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Force-Directed Map</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geo.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+    <style type="text/css">
+path {
+  fill: #ddd;
+  fill-opacity: .8;
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+line {
+  stroke: #999;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+var w = 960,
+    h = 500;
+var path = d3.geo.path(),
+    force = d3.layout.force().size([w, h]);
+var svg = d3.select("body").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+d3.json("../data/us-states.json", function(states) {
+  var nodes = [],
+      links = [];
+  states.features.forEach(function(d, i) {
+    if (d.id == "02" || d.id == "15" || d.id == "72") return;
+    var centroid = path.centroid(d);
+    centroid.x = centroid[0];
+    centroid.y = centroid[1];
+    centroid.feature = d;
+    nodes.push(centroid);
+  });
+  d3.geom.delaunay(nodes).forEach(function(d) {
+    links.push(edge(d[0], d[1]));
+    links.push(edge(d[1], d[2]));
+    links.push(edge(d[2], d[0]));
+  });
+  force
+      .gravity(0)
+      .charge(0)
+      .nodes(nodes)
+      .links(links)
+      .linkDistance(function(d) { return d.distance; })
+      .start();
+  var link = svg.selectAll("line")
+      .data(links)
+    .enter().append("line")
+      .attr("x1", function(d) { return d.source.x; })
+      .attr("y1", function(d) { return d.source.y; })
+      .attr("x2", function(d) { return d.target.x; })
+      .attr("y2", function(d) { return d.target.y; });
+  var node = svg.selectAll("g")
+      .data(nodes)
+    .enter().append("g")
+      .attr("transform", function(d) { return "translate(" + -d.x + "," + -d.y + ")"; })
+      .call(force.drag)
+    .append("path")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
+      .attr("d", function(d) { return path(d.feature); });
+  force.on("tick", function(e) {
+    link.attr("x1", function(d) { return d.source.x; })
+        .attr("y1", function(d) { return d.source.y; })
+        .attr("x2", function(d) { return d.target.x; })
+        .attr("y2", function(d) { return d.target.y; });
+    node.attr("transform", function(d) {
+      return "translate(" + d.x + "," + d.y + ")";
+    });
+  });
+});
+function edge(a, b) {
+  var dx = a[0] - b[0], dy = a[1] - b[1];
+  return {
+    source: a,
+    target: b,
+    distance: Math.sqrt(dx * dx + dy * dy)
+  };
+}
+    </script>
+  </body>
+</html>

data/lib/picky-statistics/application/javascripts/d3/examples/force/force-multi-foci.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Force-Directed Layout (Multiple Foci)</title>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <script type="text/javascript" src="../../d3.geom.js"></script>
+    <script type="text/javascript" src="../../d3.layout.js"></script>
+  </head>
+  <body>
+    <div id="chart"></div>
+    <script type="text/javascript">
+var w = 960,
+    h = 500,
+    fill = d3.scale.category10(),
+    nodes = d3.range(100).map(Object);
+var vis = d3.select("#chart").append("svg")
+    .attr("width", w)
+    .attr("height", h);
+var force = d3.layout.force()
+    .nodes(nodes)
+    .links([])
+    .size([w, h])
+    .start();
+var node = vis.selectAll("circle.node")
+    .data(nodes)
+  .enter().append("circle")
+    .attr("class", "node")
+    .attr("cx", function(d) { return d.x; })
+    .attr("cy", function(d) { return d.y; })
+    .attr("r", 8)
+    .style("fill", function(d, i) { return fill(i & 3); })
+    .style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); })
+    .style("stroke-width", 1.5)
+    .call(force.drag);
+vis.style("opacity", 1e-6)
+  .transition()
+    .duration(1000)
+    .style("opacity", 1);
+force.on("tick", function(e) {
+  // Push different nodes in different directions for clustering.
+  var k = 6 * e.alpha;
+  nodes.forEach(function(o, i) {
+    o.x += i & 2 ? k : -k;
+    o.y += i & 1 ? k : -k;
+  });
+  node.attr("cx", function(d) { return d.x; })
+      .attr("cy", function(d) { return d.y; });
+});
+d3.select("body").on("click", function() {
+  nodes.forEach(function(o, i) {
+    o.x += (Math.random() - .5) * 40;
+    o.y += (Math.random() - .5) * 40;
+  });
+  force.resume();
+});
+    </script>
+  </body>
+</html>

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

@@ -0,0 +1,9 @@
+circle.node {
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
+line.link {
+  stroke: #999;
+  stroke-opacity: .6;
+}