nstrayer/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An animated random walk using a uniform distribution to decide the angle of departure.

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

.link {
  fill: none;
  stroke-width: 1.5px;
}

.axis, .node {
  stroke: #000;
  stroke-width: 1.5px;
}

.line {
	fill:none;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
//     .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

//Random walks!
var number_of_steps = 5000;
var number_of_directions = 5;
var start_point = [{x: 0, y: 0}];
var step_length = 5;

function nextStep(current) {
	var pi = 3.1415926;
	var theta = Math.random() * (2 * pi);

	var x_direction = Math.cos(theta) * step_length;
	var y_direction = Math.sin(theta) * step_length;

	return {x: current.x + x_direction, y: current.y + y_direction}
}

function go_walking(i, num_steps, walk){
	if(i < num_steps){
		walk.push(nextStep(walk[i]));
		go_walking(i+1, num_steps, walk);
	}
	return(walk);
}

var ourWalk = go_walking(0,number_of_steps, start_point);

//ourWalk.forEach((w) => console.log(w.x));

//draw
// The d3 stuff
var biggest_x = d3.max(ourWalk, (v) => Math.abs(v.x))
var biggest_y = d3.max(ourWalk, (v) => Math.abs(v.y))
console.log(biggest_y)

var x = d3.scaleLinear()
    .domain([-biggest_x, biggest_x])
    .range([0, width]);

var y = d3.scaleLinear()
    .domain([-biggest_y, biggest_y])
    .range([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

svg.append("path")
	.datum(ourWalk)
    .attr("class", "line")
    .attr("d", line)
    .style("stroke-width", 1)
    .style("stroke", "steelblue")
    .style("opacity", 1)

var animateWalk = function() {

    // Get the length of each line in turn
    var totalLength = d3.select(".line").node().getTotalLength();

    d3.selectAll(".line")
      .style("opacity", "0.5")
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
      .duration(10000)
//       .ease("quad")
      .attr("stroke-dashoffset", 0)
      .style("stroke-width",1)

    /* intro
        .transition()
        .duration(800)
        .attr("fill-opacity", 0)
        .each("end", function(){
            writeGreeting()
            // title
            //     .transition()
            //     .duration(1800)
            //     .delay(800)
            //     .attr("fill-opacity", 0.65)
        }) */

}
animateWalk();
console.log("hello.")
console.log("everything worked!")
</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.link {
	fill: none;
	stroke-width: 1.5px;
	}

	.axis, .node {
	stroke: #000;
	stroke-width: 1.5px;
	}

	.line {
	fill:none;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	// .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	//Random walks!
	var number_of_steps = 5000;
	var number_of_directions = 5;
	var start_point = [{x: 0, y: 0}];
	var step_length = 5;

	function nextStep(current) {
	var pi = 3.1415926;
	var theta = Math.random() * (2 * pi);

	var x_direction = Math.cos(theta) * step_length;
	var y_direction = Math.sin(theta) * step_length;

	return {x: current.x + x_direction, y: current.y + y_direction}
	}

	function go_walking(i, num_steps, walk){
	if(i < num_steps){
	walk.push(nextStep(walk[i]));
	go_walking(i+1, num_steps, walk);
	}
	return(walk);
	}

	var ourWalk = go_walking(0,number_of_steps, start_point);

	//ourWalk.forEach((w) => console.log(w.x));

	//draw
	// The d3 stuff
	var biggest_x = d3.max(ourWalk, (v) => Math.abs(v.x))
	var biggest_y = d3.max(ourWalk, (v) => Math.abs(v.y))
	console.log(biggest_y)

	var x = d3.scaleLinear()
	.domain([-biggest_x, biggest_x])
	.range([0, width]);

	var y = d3.scaleLinear()
	.domain([-biggest_y, biggest_y])
	.range([height, 0]);

	var line = d3.line()
	.x(function(d) { return x(d.x); })
	.y(function(d) { return y(d.y); });

	svg.append("path")
	.datum(ourWalk)
	.attr("class", "line")
	.attr("d", line)
	.style("stroke-width", 1)
	.style("stroke", "steelblue")
	.style("opacity", 1)

	var animateWalk = function() {

	// Get the length of each line in turn
	var totalLength = d3.select(".line").node().getTotalLength();

	d3.selectAll(".line")
	.style("opacity", "0.5")
	.attr("stroke-dasharray", totalLength + " " + totalLength)
	.attr("stroke-dashoffset", totalLength)
	.transition()
	.duration(10000)
	// .ease("quad")
	.attr("stroke-dashoffset", 0)
	.style("stroke-width",1)

	/* intro
	.transition()
	.duration(800)
	.attr("fill-opacity", 0)
	.each("end", function(){
	writeGreeting()
	// title
	// .transition()
	// .duration(1800)
	// .delay(800)
	// .attr("fill-opacity", 0.65)
	}) */

	}
	animateWalk();
	console.log("hello.")
	console.log("everything worked!")
	</script>