topologicallytony/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>

		<meta charset="utf-8">

		<title>Wave 1</title>


	<!-- D3.js -->
    	<script src="https://d3js.org/d3.v4.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


	<style type="text/css">
	</style>
</head>

<body>
<div id=svgContainer></div>

		<script type="text/javascript">
//Width and height of the visualization.  Smaller numbers will zoom in, larger numbers zoom out
var w = 600;
var h = 450;

//padding creates a buffer of white space around the chart to make it a little easier to look at
var padding = 20;

//Generate Base Dataset
//This will hold the final simulated data
var x = [];
var y = [];
var dataset = [];
//How finely to partition interval
//Fun examples - 729 points, 128/256/512 amp with interval of either 2,3,4,6,12
//	729 points, 243 amp with interval of 2pi
var numDataPoints = 729;
var amp = 729;
var radius = 3;
//define x axis domain
var x_min = 0;
var x_max = 2 * Math.PI;
//var y_min = 2;
//var y_max = -2;
var y_min = 2*Math.exp(x_max);
var y_max = -2 * Math.exp(x_max);
//initialize time
var time = 8000;
//Generate a random sample of the space
for (var i = 0; i < numDataPoints; i++) {
  //Partition interval
  var curr_x = ((i * (x_max - x_min)) / (numDataPoints - 1)) + x_min;
  //Initialize the input as random numbers.  This will iterate over time, so it doesn't matter what it holds
  var curr_y = Math.exp(curr_x) * Math.sin(amp*curr_x);
  //var curr_y = Math.exp(Math.abs(curr_x) - 5) * Math.sin(amp*curr_x);
  //var curr_y = Math.sin(amp*curr_x);
  x.push(curr_x);
  y.push(curr_y);
  dataset.push([curr_x, curr_y]);
}

var xScale = d3.scaleLinear()
  .domain([y_min, y_max])
  .range([0, w]);
var yScale = d3.scaleLinear()
  .domain([x_min, x_max])
  .range([h, 0]);

var line = d3.line()
  .x(function(d, i) {
    return xScale(x[i]);
  })
  .y(function(d, i) {
    return yScale(y[i]);
  });

//Create a canvas to display the chart on
var svg = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h);

svg.append("g")
                  .call(d3.zoom().scaleExtent([1,8]).on("zoom", zoom));


//Make the background of the canvas white
svg.append("rect")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "#fff");

//Create group elements to layer the svg
//This is an easy way to make sure things you want on top are on top, and things you want behind stay behind
var layer1 = svg.append('g');
var layer2 = svg.append('g');

function drawPts() {
	var pts = layer2
  	.selectAll(".points")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("class", "points")
    .attr("cy", function(d){ return yScale(d[0]); })
    .attr("cx", function(d){ return xScale(d[1]); })
    .attr("r", radius)
    .attr("fill","steelblue")
    .transition()
    .duration(0)
    .on("start", function repeat() {
        d3.active(this)
          .transition()
          .ease(d3.easeLinear)
          .duration(time)
          .attrTween('cx', function(d) {
            return function(t) {
            	return  xScale(Math.exp(d[0]) * Math.sin(amp*(d[0]) + 2 * Math.PI * t));
            	//return  xScale(Math.exp(Math.abs(d[0]) - 5) * Math.sin(amp*(d[0]) + 2 * Math.PI * t));
              //return  xScale(Math.sin(amp*(d[0]) + 2 * Math.PI * t));
            };
          })
          .on("start", repeat);
      });


}

function drawLine() {

  //create starting path
  var path = layer2
    .append("path")
    .data(y)
    .attr("class", "cycle")
    .attr("d", line(y))
    .transition()
    .ease(d3.easeLinear)
    .duration(50)
    .on("start", tick)
    ;

  //function that takes the currently displayed path and iterates it through the logistic map
  function tick() {
                time = (time + 1) % 400
    //map the y coordinates to their new position
    y = y.map(function(d, i) {
      return Math.exp(x[i]) * Math.sin(15*(x[i] + 2 * Math.PI * (time / 400)));
    });

    //transition the line to its new coordinates
    d3.active(this)
      .attr("d", line(y))
      .transition()
      .on("start", tick);
  }
}

//initialize the animation
//drawLine();
drawPts();

function zoom() {
                svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
		</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<meta charset="utf-8">

	<title>Wave 1</title>



	<!-- D3.js -->
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


	<style type="text/css">
	</style>
	</head>

	<body>
	<div id=svgContainer></div>

	<script type="text/javascript">
	//Width and height of the visualization. Smaller numbers will zoom in, larger numbers zoom out
	var w = 600;
	var h = 450;

	//padding creates a buffer of white space around the chart to make it a little easier to look at
	var padding = 20;

	//Generate Base Dataset
	//This will hold the final simulated data
	var x = [];
	var y = [];
	var dataset = [];
	//How finely to partition interval
	//Fun examples - 729 points, 128/256/512 amp with interval of either 2,3,4,6,12
	// 729 points, 243 amp with interval of 2pi
	var numDataPoints = 729;
	var amp = 729;
	var radius = 3;
	//define x axis domain
	var x_min = 0;
	var x_max = 2 * Math.PI;
	//var y_min = 2;
	//var y_max = -2;
	var y_min = 2*Math.exp(x_max);
	var y_max = -2 * Math.exp(x_max);
	//initialize time
	var time = 8000;
	//Generate a random sample of the space
	for (var i = 0; i < numDataPoints; i++) {
	//Partition interval
	var curr_x = ((i * (x_max - x_min)) / (numDataPoints - 1)) + x_min;
	//Initialize the input as random numbers. This will iterate over time, so it doesn't matter what it holds
	var curr_y = Math.exp(curr_x) * Math.sin(amp*curr_x);
	//var curr_y = Math.exp(Math.abs(curr_x) - 5) * Math.sin(amp*curr_x);
	//var curr_y = Math.sin(amp*curr_x);
	x.push(curr_x);
	y.push(curr_y);
	dataset.push([curr_x, curr_y]);
	}

	var xScale = d3.scaleLinear()
	.domain([y_min, y_max])
	.range([0, w]);
	var yScale = d3.scaleLinear()
	.domain([x_min, x_max])
	.range([h, 0]);

	var line = d3.line()
	.x(function(d, i) {
	return xScale(x[i]);
	})
	.y(function(d, i) {
	return yScale(y[i]);
	});

	//Create a canvas to display the chart on
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	svg.append("g")
	.call(d3.zoom().scaleExtent([1,8]).on("zoom", zoom));


	//Make the background of the canvas white
	svg.append("rect")
	.attr("width", "100%")
	.attr("height", "100%")
	.attr("fill", "#fff");

	//Create group elements to layer the svg
	//This is an easy way to make sure things you want on top are on top, and things you want behind stay behind
	var layer1 = svg.append('g');
	var layer2 = svg.append('g');

	function drawPts() {
	var pts = layer2
	.selectAll(".points")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("class", "points")
	.attr("cy", function(d){ return yScale(d[0]); })
	.attr("cx", function(d){ return xScale(d[1]); })
	.attr("r", radius)
	.attr("fill","steelblue")
	.transition()
	.duration(0)
	.on("start", function repeat() {
	d3.active(this)
	.transition()
	.ease(d3.easeLinear)
	.duration(time)
	.attrTween('cx', function(d) {
	return function(t) {
	return xScale(Math.exp(d[0]) * Math.sin(amp(d[0]) + 2 Math.PI * t));
	//return xScale(Math.exp(Math.abs(d[0]) - 5) * Math.sin(amp(d[0]) + 2 Math.PI * t));
	//return xScale(Math.sin(amp(d[0]) + 2 Math.PI * t));
	};
	})
	.on("start", repeat);
	});


	}

	function drawLine() {

	//create starting path
	var path = layer2
	.append("path")
	.data(y)
	.attr("class", "cycle")
	.attr("d", line(y))
	.transition()
	.ease(d3.easeLinear)
	.duration(50)
	.on("start", tick)
	;

	//function that takes the currently displayed path and iterates it through the logistic map
	function tick() {
	time = (time + 1) % 400
	//map the y coordinates to their new position
	y = y.map(function(d, i) {
	return Math.exp(x[i]) * Math.sin(15(x[i] + 2 Math.PI * (time / 400)));
	});

	//transition the line to its new coordinates
	d3.active(this)
	.attr("d", line(y))
	.transition()
	.on("start", tick);
	}
	}

	//initialize the animation
	//drawLine();
	drawPts();

	function zoom() {
	svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
	}
	</script>
	</body>

	</html>