biovisualize/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Foundations of D3: Manual Scaling

A 1-dimensional random walk visualized.  To better understand what scales are doing, avoids using D3's build in scales and instead manually computes a step size as well as a starting position from which to walk.

You should use blockbuilder.org and the following Javascript and d3 functions to adjust the num_steps and radius to see how the path changes
Once you have a feel for the parameters, make a line chart instead. For extra credit gradient encode the random walk path.

Reference


d3.select()
d3.append()
d3.attr()
d3.style()
d3.datum()

forked from Jay-Oh-eN's block: 1-D Random Walk

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    path {
      fill: none;
      stroke: black
    }
    circle {
      fill: red;
    }
  </style>
</head>

<body>
  <script>
    var width = 960;
    var height = 500;
    var numSteps = 250;

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

    var position = height / 2;
    var stepSize = width / numSteps;
    var step = 0;
    var walkStepSize = 10;
    var path = [];
    var line = d3.svg.line()
    	.x(function(d){ return d.x; })
    	.y(function(d){ return d.y; });
		var rnd = d3.random.normal(0, 1);
    for (var i = 0; i < numSteps; i++) {
      position += rnd() * walkStepSize;
      step += stepSize;
      path.push({x: step, y: position});

      svg.append('circle')
         .attr('cx', step)
         .attr('cy', position)
         .attr('r', 2);
    }
     svg.append('path')
      	.attr({d: line(path)})
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	path {
	fill: none;
	stroke: black
	}
	circle {
	fill: red;
	}
	</style>
	</head>

	<body>
	<script>
	var width = 960;
	var height = 500;
	var numSteps = 250;

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

	var position = height / 2;
	var stepSize = width / numSteps;
	var step = 0;
	var walkStepSize = 10;
	var path = [];
	var line = d3.svg.line()
	.x(function(d){ return d.x; })
	.y(function(d){ return d.y; });
	var rnd = d3.random.normal(0, 1);
	for (var i = 0; i < numSteps; i++) {
	position += rnd() * walkStepSize;
	step += stepSize;
	path.push({x: step, y: position});

	svg.append('circle')
	.attr('cx', step)
	.attr('cy', position)
	.attr('r', 2);
	}
	svg.append('path')
	.attr({d: line(path)})
	</script>
	</body>