Unknown Pleasures
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style> | |
| body { | |
| background:#000; | |
| font: 10px sans-serif; | |
| width:960px; | |
| margin:0 auto; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .area { | |
| fill: black; | |
| } | |
| .line { | |
| stroke-width:2; | |
| stroke:#eee; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.time.scale() | |
| .domain([0, 1]) | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([0, 1]) | |
| .range([height, 0]); | |
| var area = d3.svg.area() | |
| .x(function(d) { return x(d.x); }) | |
| .y0(height) | |
| .y1(function(d) { return y(d.y); }) | |
| .interpolate('basis'); | |
| var line = d3.svg.line() | |
| .x(function(d) { return x(d.x); }) | |
| .y(function(d) { return y(d.y); }) | |
| .interpolate('basis'); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var data = d3.range(0, 18).map(function(y) { | |
| return d3.range(0, 40).map(function(x) { | |
| return { | |
| x: x / 40, | |
| y0: y / 20, | |
| y: (y / 20) + Math.sin(x / (Math.PI * 4)) * (Math.random() / 10) | |
| }; | |
| }); | |
| }).reverse(); | |
| function draw(data) { | |
| var wave = svg.selectAll('g.wave') | |
| .data(data) | |
| .enter() | |
| .append('g') | |
| .attr('class', 'wave'); | |
| wave.append('path') | |
| .attr("class", "area") | |
| .attr("d", area); | |
| svg.selectAll('path.area').transition().duration(100).attr("d", area); | |
| wave.append('path') | |
| .attr("class", "line"); | |
| svg.selectAll('path.line').transition().duration(1000).attr("d", line); | |
| } | |
| window.setInterval(function() { | |
| for (var y = 0; y < data.length; y++) { | |
| for (var x = 0; x < data[y].length; x++) { | |
| data[y][x].y = Math.min( | |
| data[y][x].y0 + 0.09, | |
| Math.max( | |
| data[y][x].y0 - 0.09, data[y][x].y + (Math.random() - 0.5) * Math.sin(x / (Math.PI * 4)) * 0.02)); | |
| } | |
| } | |
| draw(data); | |
| }, 1000); | |
| draw(data); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment