February 25, 2013 15:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>
  <title>circadian lineplot init</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
 path {
  fill: none;
  stroke: black;
  stroke-width: 2px;
 }
 .axis text {
  font: 10px sans-serif;
 }

 .axis line,
 .axis circle {
  fill: none;
  stroke: #777;
  stroke-dasharray: 1,4;
 }

 .line {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
 }
 </style>
 <body>
 <div id="graph1">
 <script type="text/javascript">

 var w = 460,
    h = 460,
    p = 20,
    rayon = 180;

 var data = d3.range(0, 24, .001).map(function(x) {
  return[x, 145+14*Math.cos((2*Math.PI/24)*(x-14))+7*Math.cos(2*(2*Math.PI/24)*(x-9))+3*Math.cos(3*(2*Math.PI/24)*(x-2))];
 });

 var r = d3.scale.linear()
    .domain([120, 170])
    .range([30, rayon ]);

 var xScaler = d3.scale.linear()
    .domain([0, 24])
    .range([0, 2*Math.PI]);

 var svgLine2 = d3.svg.line.radial()
    .radius(function(d) { return r(d[1]); })
    .angle(function(d) { return xScaler(d[0]); });

 var vis2 = d3.select("#graph1")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "graph")
    .append("g")
    .attr("transform", "translate(" + (w / 2 + p) + "," + (h / 2 - p) + ")")
    .on("mousemove", mousemove2);

 var gr = vis2.append("g")
    .attr("class", "r axis")
  .selectAll("g")
    .data(r.ticks(10))
  .enter().append("g");

 gr.append("circle")
    .attr("r", r);

 gr.append("text")
    .attr("y", function(d) { return -r(d) - 4; })
    .attr("transform", "rotate(7)")
    .style("text-anchor", "middle")
    .text(function(d) { return d; });

 var ga = vis2.append("g")
    .attr("class", "a axis")
  .selectAll("g")
    .data(d3.range(0, 360, 15))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + (d-90) + ")"; });

 ga.append("line")
    .attr("x1", 30)
    .attr("x2", rayon);

 ga.append("text")
    .attr("x", rayon + 6)
    .attr("dy", ".35em")
    .style("text-anchor", function(d) { return d > 180 && d < 360 ? "end" : null; })
    .attr("transform", function(d) { return d > 180 && d < 360 ? "rotate(180 " + (rayon + 6) + ",0)" : null; })
    .text(function(d) { return d/15 + "hr"; });

 var line2 = vis2.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", svgLine2);

 var circleguide2 = vis2.append("circle")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 0)
      .attr("fill", "green");

 function mousemove2() {
      var mouse = d3.mouse(this);
      var mx = mouse[0];
      var my = mouse[1];

      var omega = Math.atan2(mx, my);

      var nx=rayon*Math.sin(omega);
      var ny=rayon*Math.cos(omega);

    circleguide2.data(data).attr("opacity", 1)
      .attr("cx", nx)
      .attr("cy", ny)
      .attr("r", 3)
      .attr("fill", "green")
 };

    </script>
  </div>
 </body>
	<!DOCTYPE html>
	<title>circadian lineplot init</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	path {
	fill: none;
	stroke: black;
	stroke-width: 2px;
	}
	.axis text {
	font: 10px sans-serif;
	}

	.axis line,
	.axis circle {
	fill: none;
	stroke: #777;
	stroke-dasharray: 1,4;
	}

	.line {
	fill: none;
	stroke: red;
	stroke-width: 1.5px;
	}
	</style>
	<body>
	<div id="graph1">
	<script type="text/javascript">

	var w = 460,
	h = 460,
	p = 20,
	rayon = 180;

	var data = d3.range(0, 24, .001).map(function(x) {
	return[x, 145+14Math.cos((2Math.PI/24)(x-14))+7Math.cos(2(2Math.PI/24)(x-9))+3Math.cos(3(2Math.PI/24)*(x-2))];
	});

	var r = d3.scale.linear()
	.domain([120, 170])
	.range([30, rayon ]);

	var xScaler = d3.scale.linear()
	.domain([0, 24])
	.range([0, 2*Math.PI]);

	var svgLine2 = d3.svg.line.radial()
	.radius(function(d) { return r(d[1]); })
	.angle(function(d) { return xScaler(d[0]); });

	var vis2 = d3.select("#graph1")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.attr("class", "graph")
	.append("g")
	.attr("transform", "translate(" + (w / 2 + p) + "," + (h / 2 - p) + ")")
	.on("mousemove", mousemove2);

	var gr = vis2.append("g")
	.attr("class", "r axis")
	.selectAll("g")
	.data(r.ticks(10))
	.enter().append("g");

	gr.append("circle")
	.attr("r", r);

	gr.append("text")
	.attr("y", function(d) { return -r(d) - 4; })
	.attr("transform", "rotate(7)")
	.style("text-anchor", "middle")
	.text(function(d) { return d; });

	var ga = vis2.append("g")
	.attr("class", "a axis")
	.selectAll("g")
	.data(d3.range(0, 360, 15))
	.enter().append("g")
	.attr("transform", function(d) { return "rotate(" + (d-90) + ")"; });

	ga.append("line")
	.attr("x1", 30)
	.attr("x2", rayon);

	ga.append("text")
	.attr("x", rayon + 6)
	.attr("dy", ".35em")
	.style("text-anchor", function(d) { return d > 180 && d < 360 ? "end" : null; })
	.attr("transform", function(d) { return d > 180 && d < 360 ? "rotate(180 " + (rayon + 6) + ",0)" : null; })
	.text(function(d) { return d/15 + "hr"; });

	var line2 = vis2.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", svgLine2);

	var circleguide2 = vis2.append("circle")
	.attr("cx", 0)
	.attr("cy", 0)
	.attr("r", 0)
	.attr("fill", "green");

	function mousemove2() {
	var mouse = d3.mouse(this);
	var mx = mouse[0];
	var my = mouse[1];

	var omega = Math.atan2(mx, my);

	var nx=rayon*Math.sin(omega);
	var ny=rayon*Math.cos(omega);

	circleguide2.data(data).attr("opacity", 1)
	.attr("cx", nx)
	.attr("cy", ny)
	.attr("r", 3)
	.attr("fill", "green")
	};

	</script>
	</div>
	</body>