sin, cos, random

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

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");  } );

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js