D3-rainbow 2014-09-03 JsPy&Others <br><!DOCTYPE html><br><meta charset="utf-8"><br><style><br><br>body {<br> background: #333;<br>}<br><br></style><br><body><br><script src="http://d3js.org/d3.v3.min.js"></script><br><script><br><br>var margin = {top: 100, right: 100, bottom: 100, left: 100},<br> width = 960 - margin.left - margin.right,<br> height = 500 - margin.top - margin.bottom;<br><br>var x = d3.scale.linear()<br> .domain([0, 5.9])<br> .range([0, width]);<br><br>var y = d3.scale.linear()<br> .domain([-1, 1])<br> .range([height, 0]);<br><br>var z = d3.scale.linear()<br> .domain([0, 5.9])<br> .range([0, 360]);<br><br>var points = d3.range(0, 6, .1).map(function(t) {<br> return {value: t, 0: x(t), 1: y(Math.sin(t))};<br>});<br><br>var svg = d3.select(“body”).append(“svg”)<br> .attr(“width”, width + margin.left + margin.right)<br> .attr(“height”, height + margin.top + margin.bottom)<br> .append(“g”)<br> .attr(“transform”, “translate(“ + margin.left + “,” + margin.top + “)”);<br><br>var path = svg.selectAll(“path”)<br> .data(quad(points))<br> .enter().append(“path”)<br> .style(“fill”, function(d) { return d3.hsl(z(d[1].value), 1, .5); })<br> .style(“stroke”, “#000”);<br><br>var t0 = Date.now();<br>d3.timer(function() {<br> var dt = (Date.now() - t0) <em> .001;<br> points.forEach(function(d) { d[1] = y(d.scale = Math.sin(d.value + dt)); });<br> path.attr(“d”, function(d) { return lineJoin(d[0], d[1], d[2], d[3], 80 </em> d[1].scale <em> d[1].scale + 10); });<br>});<br><br>// Compute quads of adjacent points [p0, p1, p2, p3].<br>function quad(points) {<br> return d3.range(points.length - 1).map(function(i) {<br> return [points[i - 1], points[i], points[i + 1], points[i + 2]];<br> });<br>}<br><br>// Compute stroke outline for segment p12.<br>function lineJoin(p0, p1, p2, p3, width) {<br> var u12 = perp(p1, p2),<br> r = width / 2,<br> a = [p1[0] + u12[0] </em> r, p1[1] + u12[1] <em> r],<br> b = [p2[0] + u12[0] </em> r, p2[1] + u12[1] <em> r],<br> c = [p2[0] - u12[0] </em> r, p2[1] - u12[1] <em> r],<br> d = [p1[0] - u12[0] </em> r, p1[1] - u12[1] <em> r];<br><br> if (p0) { // clip ad and dc using average of u01 and u12<br> var u01 = perp(p0, p1), e = [p1[0] + u01[0] + u12[0], p1[1] + u01[1] + u12[1]];<br> a = lineIntersect(p1, e, a, b);<br> d = lineIntersect(p1, e, d, c);<br> }<br><br> if (p3) { // clip ab and dc using average of u12 and u23<br> var u23 = perp(p2, p3), e = [p2[0] + u23[0] + u12[0], p2[1] + u23[1] + u12[1]];<br> b = lineIntersect(p2, e, a, b);<br> c = lineIntersect(p2, e, d, c);<br> }<br><br> return “M” + a + “L” + b + “ “ + c + “ “ + d + “Z”;<br>}<br><br>// Compute intersection of two infinite lines ab and cd.<br>function lineIntersect(a, b, c, d) {<br> var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3,<br> y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3,<br> ua = (x43 </em> (y1 - y3) - y43 <em> (x1 - x3)) / (y43 </em> x21 - x43 <em> y21);<br> return [x1 + ua </em> x21, y1 + ua <em> y21];<br>}<br><br>// Compute unit vector perpendicular to p01.<br>function perp(p0, p1) {<br> var u01x = p0[1] - p1[1], u01y = p1[0] - p0[0],<br> u01d = Math.sqrt(u01x </em> u01x + u01y * u01y);<br> return [u01x / u01d, u01y / u01d];<br>}<br><br></script><br></body>
