aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>sin, cos, random</title>
</head>
<body>
  <button type="button" onclick="draw('sin')">sin</button>
  <button type="button" onclick="draw('cos')">cos</button>
  <button type="button" onclick="draw('rnd')">rnd</button>
  <div id="viz"><div>

<script>
var w = 960, h = 450;
var x = d3.range(0, 2*3.14, 0.1);
var xp = d3.scale.linear().domain([0, 2*3.14]).range([0, w]);
var viz = d3.select("div#viz").append("svg").attr("width", w).attr("height", h);

viz.selectAll("line")
   .data(x)
   .enter()
   .append("line")
   .attr("stroke","grey")
   .attr("stroke-width","13")
   .attr("x1",xp)
   .attr("y1",h/2)
   .attr("x2",xp)
   .attr("y2", function(d,i) { return h/2+Math.sin(d)*(-h/2); } )
   .on("mouseover", function(d) { d3.select(this).attr("stroke","black"); } )
   .on("mouseout",  function(d) { d3.select(this).attr("stroke","grey");  } );

function draw(f) {
  viz.selectAll("line").data(x).transition()
     .delay(function(d,i) {return i;} )
     .attr("y2", function(d) {
       switch(f) {
         case 'sin':
           return h/2 + (Math.sin(d) * (-h/2));
         case 'cos':
           return h/2 + (Math.cos(d) * (-h/2));
         default:
           return h/2 + (Math.random()*2-1)*(-h/2);
       }
    });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>sin, cos, random</title>
	</head>
	<body>
	<button type="button" onclick="draw('sin')">sin</button>
	<button type="button" onclick="draw('cos')">cos</button>
	<button type="button" onclick="draw('rnd')">rnd</button>
	<div id="viz"><div>

	<script>
	var w = 960, h = 450;
	var x = d3.range(0, 2*3.14, 0.1);
	var xp = d3.scale.linear().domain([0, 2*3.14]).range([0, w]);
	var viz = d3.select("div#viz").append("svg").attr("width", w).attr("height", h);

	viz.selectAll("line")
	.data(x)
	.enter()
	.append("line")
	.attr("stroke","grey")
	.attr("stroke-width","13")
	.attr("x1",xp)
	.attr("y1",h/2)
	.attr("x2",xp)
	.attr("y2", function(d,i) { return h/2+Math.sin(d)*(-h/2); } )
	.on("mouseover", function(d) { d3.select(this).attr("stroke","black"); } )
	.on("mouseout", function(d) { d3.select(this).attr("stroke","grey"); } );

	function draw(f) {
	viz.selectAll("line").data(x).transition()
	.delay(function(d,i) {return i;} )
	.attr("y2", function(d) {
	switch(f) {
	case 'sin':
	return h/2 + (Math.sin(d) * (-h/2));
	case 'cos':
	return h/2 + (Math.cos(d) * (-h/2));
	default:
	return h/2 + (Math.random()2-1)(-h/2);
	}
	});
	}
	</script>
	</body>
	</html>