Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 21st, 2012  |  syntax: None  |  size: 3.27 KB  |  hits: 17  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. //Try changing all these parameters
  2. //Layout properties
  3. var
  4.      n = 29
  5.     , m = 30
  6.     , spacing = 21
  7.     , opacity = 0.8
  8.     , stroke_width = 20
  9.  
  10. //Sin wave function
  11. //y = amplitude * sin( omega * theta + phase)
  12. var amplitude = 90
  13.     , theta = Math.PI * 3.5
  14.     , omega = -0.1
  15.     , phase = -0.5
  16.  
  17.  
  18. var colors = [
  19.     '#D40067'
  20.     , '#4DA9DF'
  21.     , '#00ff00'
  22.     , '#ff0000'
  23.    
  24. ]
  25.  
  26. //interpolate over multiple colors
  27. var color_scale = function(i) {
  28.     var num_interps = colors.length -1
  29.    
  30.     var ord = d3.scale.linear()
  31.         .domain([0, n])
  32.         .range([0, num_interps])
  33.    
  34.     var section = parseInt(ord(i))
  35.     //console.log("section", section)
  36.     var section_size = n / num_interps
  37.     //get the two colors we want to interpolate between
  38.     var col_range = [colors[section], colors[section+1]]
  39.    
  40.     var col_scale = d3.scale.linear()
  41.         .domain([section * section_size, (section+1) * section_size])
  42.         //.interpolate(d3.interpolateRgb)
  43.         .interpolate(d3.interpolateHsl)
  44.         .range(col_range)
  45.    
  46.     return col_scale(i)
  47.    
  48. }
  49. /*
  50. var color = d3.scale.linear()
  51.     .domain([0, n])
  52.     //.interpolate(d3.interpolateRgb)
  53.     .interpolate(d3.interpolateHsl)
  54.     .range(['#D40067', '#4DA9DF'])
  55. */    
  56. var color = color_scale
  57.  
  58.  
  59.  
  60. var sw = parseInt(d3.select("svg").style("width"))
  61. //make the sin waves extend past the width a little
  62. sw += .1 * sw
  63. var sh = parseInt(d3.select("svg").style("height"))
  64.  
  65.  
  66. var lines = [ ];
  67. for (i in d3.range(n)) {
  68.  
  69.     var data = d3.range(m)
  70.     lines.push({
  71.         index: i,
  72.         data: data
  73.     })
  74. }
  75.  
  76. var xscale = d3.scale.linear()
  77.     .domain([0, m])
  78.     .range([-.1*sw, sw])
  79.  
  80. function line_maker( data ) {
  81.     var freq = omega * data.index
  82.     var svgline = d3.svg.line()
  83.         .x(function(d,i) {
  84.             return xscale(d);
  85.         })
  86.         .y(function(d,i) {
  87.             var th = d/m * theta
  88.             var ph = (n-data.index) * phase
  89.             var y = amplitude * Math.sin(freq * th + ph );
  90.             return y
  91.         })
  92.         .interpolate("basis")
  93.         //.interpolate("linear")
  94.     return svgline(data.data);
  95. }
  96.  
  97. function lineenter(d, i) {
  98.     d3.select(this).selectAll("path.path")
  99.         .data([d])
  100.         .enter()
  101.     .append("svg:path")
  102.         .attr("class", "path")
  103.         .attr("stroke-width", stroke_width)
  104.         //.attr("stroke-width", function(e,i) { return e.width;})
  105.         .attr("stroke", "#fff")
  106.         .attr("fill", "none")
  107.     update_spacing()
  108. }
  109.  
  110. function update_spacing()
  111. {
  112.     var th = spacing * n;
  113.     var hscale = d3.scale.linear()
  114.         .domain([0, n])
  115.         .range([0, sh])
  116.     d3.selectAll("g.line path")
  117.         .attr("transform", function(d, i) {
  118.             //return "translate(" + [0, th - spacing * d.index] + ")";
  119.             return "translate(" + [0, 10+sh/2 + th / 2 - spacing * d.index] + ")";
  120.         })
  121. }
  122.  
  123. var svg = d3.select("svg")
  124.     .attr("width", sw)
  125.     .attr("height", sh)
  126.   .append("svg:g")
  127.  
  128. var line = svg.selectAll("g.line")
  129.     .data(lines)
  130.   .enter().append("svg:g")
  131.     .attr("class", "line")
  132.     .each(lineenter);
  133.  
  134.  
  135.  
  136.  
  137. /*
  138. var opacity = d3.scale.linear()
  139.     .domain([0, n])
  140.     .range([1, .4])
  141. */
  142.  
  143. d3.selectAll("g.line path")
  144.     .attr("d", function(d,i) {
  145.         return line_maker(d)
  146.     })
  147.     .attr("stroke", function(d,i) { return color(d.index);})
  148.     .attr("opacity", opacity);
create a new version of this paste RAW Paste Data