sin, cos, random by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
<script src="//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>