kordless/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Usage

graphit stuff
Output

The output of this command is typicall a graph.  Ocassionally it's a simian.
Features


awesome graphs
moves and updates
contains data

Code

// this is some sample code
alert("foobar");


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Streamgraph</title>
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 1170;
}

button {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<button onclick="transition()">Update</button>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var n = 20, // number of layers
    m = 200, // number of samples per layer
    stack = d3.layout.stack().offset("wiggle"),
    layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
    layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

var width = 1170,
    height = 500;

var x = d3.scale.linear()
    .domain([0, m - 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
    .range([height, 0]);

var color = d3.scale.linear()
    .range(["#aad", "#556"]);

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("path")
    .data(layers0)
  .enter().append("path")
    .attr("d", area)
    .style("fill", function() { return color(Math.random()); });

function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = 0;
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}

</script>

## tinyprobe.js
$(document).ready(function() {
	chart_id = "chart-" + (new Date).getTime();
	$terminal.print($('<div style="height: 300px; width: 800; border: none;" id="'+chart_id+'"></div>'));
	(function basic_bubble(container) {
	  var
	    d1 = [],
	    d2 = [],
	    point, graph, i;

	  for (i = 0; i < 10; i++ ){
	    point = [i, Math.ceil(Math.random()*10), Math.ceil(Math.random()*10)];
	    d1.push(point);

	    point = [i, Math.ceil(Math.random()*10), Math.ceil(Math.random()*10)];
	    d2.push(point);
	  }

	  // Draw the graph
	  graph = Flotr.draw(container, [d1, d2], {
	    bubbles : { show : true, baseRadius : 5 },
	    xaxis   : { min : -4, max : 14 },
	    yaxis   : { min : -4, max : 14 }
	  });
	})(document.getElementById(chart_id));
});

## tinyprobe.manifest
name: Flow Graph
author: kordless
description: Remember this demo?

command: flow

externals:
  - http://d3js.org/d3.v2.js

parameters:
  shape:
    required: True
  color:
    required: False
    default: "red"

variables:
  height: 200
  width: 200
  title: "My Chart"
  data: [50,60,80,90,110,110,80,20]

## tinyprobe.png

      
    Raw
  

              tinyprobe.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Streamgraph</title>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 1170;
	}

	button {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<button onclick="transition()">Update</button>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var n = 20, // number of layers
	m = 200, // number of samples per layer
	stack = d3.layout.stack().offset("wiggle"),
	layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
	layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

	var width = 1170,
	height = 500;

	var x = d3.scale.linear()
	.domain([0, m - 1])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
	.range([height, 0]);

	var color = d3.scale.linear()
	.range(["#aad", "#556"]);

	var area = d3.svg.area()
	.x(function(d) { return x(d.x); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("path")
	.data(layers0)
	.enter().append("path")
	.attr("d", area)
	.style("fill", function() { return color(Math.random()); });

	function transition() {
	d3.selectAll("path")
	.data(function() {
	var d = layers1;
	layers1 = layers0;
	return layers0 = d;
	})
	.transition()
	.duration(2500)
	.attr("d", area);
	}

	// Inspired by Lee Byron's test data generator.
	function bumpLayer(n) {

	function bump(a) {
	var x = 1 / (.1 + Math.random()),
	y = 2 * Math.random() - .5,
	z = 10 / (.1 + Math.random());
	for (var i = 0; i < n; i++) {
	var w = (i / n - y) * z;
	a[i] += x * Math.exp(-w * w);
	}
	}

	var a = [], i;
	for (i = 0; i < n; ++i) a[i] = 0;
	for (i = 0; i < 5; ++i) bump(a);
	return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
	}

	</script>
	$(document).ready(function() {
	chart_id = "chart-" + (new Date).getTime();
	$terminal.print($('<div style="height: 300px; width: 800; border: none;" id="'+chart_id+'"></div>'));
	(function basic_bubble(container) {
	var
	d1 = [],
	d2 = [],
	point, graph, i;

	for (i = 0; i < 10; i++ ){
	point = [i, Math.ceil(Math.random()10), Math.ceil(Math.random()10)];
	d1.push(point);

	point = [i, Math.ceil(Math.random()10), Math.ceil(Math.random()10)];
	d2.push(point);
	}

	// Draw the graph
	graph = Flotr.draw(container, [d1, d2], {
	bubbles : { show : true, baseRadius : 5 },
	xaxis : { min : -4, max : 14 },
	yaxis : { min : -4, max : 14 }
	});
	})(document.getElementById(chart_id));
	});
	name: Flow Graph
	author: kordless
	description: Remember this demo?

	command: flow

	externals:
	- http://d3js.org/d3.v2.js

	parameters:
	shape:
	required: True
	color:
	required: False
	default: "red"

	variables:
	height: 200
	width: 200
	title: "My Chart"
	data: [50,60,80,90,110,110,80,20]