Created
February 25, 2013 15:11
-
-
Save anonymous/5030441 to your computer and use it in GitHub Desktop.
radial2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment