topologicallytony · July 19, 2017 03:35
diff --git a/index.html b/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>