tgk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    First prototype of propagator values over time for presentation.

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

rect {
  fill: none;
  pointer-events: all;
  stroke: #444;
}

.node {
  stroke-width: 4px;
  stroke: #000;
}

.stabile {
  fill: #0EBFE9;
}

.unstabile {
  fill: #FF3030;
}

#tooltip {
  position: absolute;
  width: 170px;
  height: auto;
  padding: 10px;
  color: white;
  background-color: #272727;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip pre {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 300;

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

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

var node = svg.selectAll(".node");

var mousemove = function(d) {
  var xPosition = d3.select(this).attr("cx") - 170 / 2;
  var yPosition = d3.select(this).attr("cy") - 110;

  d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px");
  d3.select("#tooltip #values")
    .text(d.values);
  d3.select("#tooltip").classed("hidden", false);
};

var mouseout = function() {
  d3.select("#tooltip").classed("hidden", true);
};

var update = function(states){

  var scale = d3.scale.linear()
                .domain([0, states.length - 1])
                .range([90, width - 90]);

  node = node.data(states, function(d) { return d.id; } );

  node.enter()
    .insert("circle", ".node")
    .attr("class", "node")
    .classed("stabile",   function(d) { return  d.stabile; })
    .classed("unstabile", function(d) { return !d.stabile; })
    .attr("r", function(d) { return d.stabile ? 25 : 15 })
    .attr("cx", function(d, i) { return scale(i); })
    .attr("cy", height * 3 / 2)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout);

  node.exit()
    .transition()
    .duration(1000)
    .attr("cy", height * 3 /2)
    .each("end", function() { d3.select(this).remove(); });

  node
    .transition()
    .duration(1000)
    .attr("cx", function(d, i) { return scale(i); })
    .attr("cy", height / 2);

};

var exampleOne = [
{id: "A",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1, 10]\n" +
 "baz:            3"},
{id: "B",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1,  6]\n" +
 "baz:            3"},
{id: "D",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1,  6]\n" +
 "baz:            3"}];


var exampleTwo = [
{id: "A",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1, 10]\n" +
 "baz:            3"},
{id: "C",
 stabile: false,
 values: "" +
 "foo:           42\n" +
 "bar:       [1, 6]\n" +
 "baz:            3"},
{id: "B",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1,  6]\n" +
 "baz:            3"},
{id: "D",
 stabile: true,
 values: "" +
 "foo:           42\n" +
 "bar:      [1,  6]\n" +
 "baz:            3"}];

update(exampleOne);

d3.select(self.frameElement).style("height", height + "px");
</script>

<div id="tooltip" class="hidden">
  <pre id="values"></pre>
</div>

</body>

</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	rect {
	fill: none;
	pointer-events: all;
	stroke: #444;
	}

	.node {
	stroke-width: 4px;
	stroke: #000;
	}

	.stabile {
	fill: #0EBFE9;
	}

	.unstabile {
	fill: #FF3030;
	}

	#tooltip {
	position: absolute;
	width: 170px;
	height: auto;
	padding: 10px;
	color: white;
	background-color: #272727;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip pre {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 300;

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

	svg.append("rect")
	.attr("width", width)
	.attr("height", height);

	var node = svg.selectAll(".node");

	var mousemove = function(d) {
	var xPosition = d3.select(this).attr("cx") - 170 / 2;
	var yPosition = d3.select(this).attr("cy") - 110;

	d3.select("#tooltip")
	.style("left", xPosition + "px")
	.style("top", yPosition + "px");
	d3.select("#tooltip #values")
	.text(d.values);
	d3.select("#tooltip").classed("hidden", false);
	};

	var mouseout = function() {
	d3.select("#tooltip").classed("hidden", true);
	};

	var update = function(states){

	var scale = d3.scale.linear()
	.domain([0, states.length - 1])
	.range([90, width - 90]);

	node = node.data(states, function(d) { return d.id; } );

	node.enter()
	.insert("circle", ".node")
	.attr("class", "node")
	.classed("stabile", function(d) { return d.stabile; })
	.classed("unstabile", function(d) { return !d.stabile; })
	.attr("r", function(d) { return d.stabile ? 25 : 15 })
	.attr("cx", function(d, i) { return scale(i); })
	.attr("cy", height * 3 / 2)
	.on("mousemove", mousemove)
	.on("mouseout", mouseout);

	node.exit()
	.transition()
	.duration(1000)
	.attr("cy", height * 3 /2)
	.each("end", function() { d3.select(this).remove(); });

	node
	.transition()
	.duration(1000)
	.attr("cx", function(d, i) { return scale(i); })
	.attr("cy", height / 2);

	};

	var exampleOne = [
	{id: "A",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 10]\n" +
	"baz: 3"},
	{id: "B",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 6]\n" +
	"baz: 3"},
	{id: "D",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 6]\n" +
	"baz: 3"}];


	var exampleTwo = [
	{id: "A",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 10]\n" +
	"baz: 3"},
	{id: "C",
	stabile: false,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 6]\n" +
	"baz: 3"},
	{id: "B",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 6]\n" +
	"baz: 3"},
	{id: "D",
	stabile: true,
	values: "" +
	"foo: 42\n" +
	"bar: [1, 6]\n" +
	"baz: 3"}];

	update(exampleOne);

	d3.select(self.frameElement).style("height", height + "px");
	</script>

	<div id="tooltip" class="hidden">
	<pre id="values"></pre>
	</div>

	</body>

	</html>