mikeskaug/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simulation of a simple two dimensional Gaussian random walk. Random walks are used to model and understand many physical phenomena such as the movement of molecules through our bodies, the spread of contaminants underground and the fluctuation of stock prices.

  
## index.html
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="index.js"></script>
</body>

## index.js
const width = window.innerWidth;
const height = window.innerHeight;
const originX = width / 2;
const originY = height / 2;
const vertices = [{x: 0, y: 0}];
const STEP_SIGMA = 5;
const MAX_STEPS = 5000;


const line = d3.line()
  .x(d => { return originX + d.x })
  .y(d => { return originY + d.y });

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

function withinBounds (vertices) {
  let lastPoint = vertices[vertices.length - 1];
  return (originX + lastPoint.x) > 0 &&
         (originX + lastPoint.x) < width &&
         (originY + lastPoint.y) > 0 &&
         (originY + lastPoint.y) < height;
}

svg.append("path");
const path = svg.selectAll("path").data(vertices);
const marker = svg.selectAll('circle')
  .data(vertices)
  .enter().append('circle')
  .attr('r', 5)
  .attr('cx', d => { return originX + d.x })
	.attr('cy', d => { return originY + d.y });

const timer = d3.timer(elapsed => {
  if (withinBounds(vertices) && vertices.length < MAX_STEPS) {
    let last = vertices[vertices.length-1];
    let xPos = last.x;
    let yPos = last.y;

    xPos += d3.randomNormal(0, STEP_SIGMA)();
    yPos += d3.randomNormal(0, STEP_SIGMA)();

    vertices.push({x: xPos, y: yPos});
    path.attr("d", d => line(vertices));
    marker
      .attr('cx', d => { return originX + vertices[vertices.length-1].x })
      .attr('cy', d => { return originY + vertices[vertices.length-1].y });
  } else {
    timer.stop();
  }

});

## preview.png

      
    Raw
  

              preview.png
            
          
## style.css
body {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
}

path {
  stroke: rgb(70, 70, 70);
  stroke-linejoin: round;
  stroke-width: 2px;
  fill: none;
}

circle {
  fill: black;
  stroke: none;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<script src="index.js"></script>
	</body>
	const width = window.innerWidth;
	const height = window.innerHeight;
	const originX = width / 2;
	const originY = height / 2;
	const vertices = [{x: 0, y: 0}];
	const STEP_SIGMA = 5;
	const MAX_STEPS = 5000;


	const line = d3.line()
	.x(d => { return originX + d.x })
	.y(d => { return originY + d.y });

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

	function withinBounds (vertices) {
	let lastPoint = vertices[vertices.length - 1];
	return (originX + lastPoint.x) > 0 &&
	(originX + lastPoint.x) < width &&
	(originY + lastPoint.y) > 0 &&
	(originY + lastPoint.y) < height;
	}

	svg.append("path");
	const path = svg.selectAll("path").data(vertices);
	const marker = svg.selectAll('circle')
	.data(vertices)
	.enter().append('circle')
	.attr('r', 5)
	.attr('cx', d => { return originX + d.x })
	.attr('cy', d => { return originY + d.y });

	const timer = d3.timer(elapsed => {
	if (withinBounds(vertices) && vertices.length < MAX_STEPS) {
	let last = vertices[vertices.length-1];
	let xPos = last.x;
	let yPos = last.y;

	xPos += d3.randomNormal(0, STEP_SIGMA)();
	yPos += d3.randomNormal(0, STEP_SIGMA)();

	vertices.push({x: xPos, y: yPos});
	path.attr("d", d => line(vertices));
	marker
	.attr('cx', d => { return originX + vertices[vertices.length-1].x })
	.attr('cy', d => { return originY + vertices[vertices.length-1].y });
	} else {
	timer.stop();
	}

	});
	body {
	margin: 0;
	text-align: center;
	font-family: sans-serif;
	font-size: 14px;
	}

	path {
	stroke: rgb(70, 70, 70);
	stroke-linejoin: round;
	stroke-width: 2px;
	fill: none;
	}

	circle {
	fill: black;
	stroke: none;
	}