Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //Try changing all these parameters
- //Layout properties
- var spacing = 11
- , opacity = 0.576
- , stroke_width = 6
- //Sin wave function
- //y = amplitude * sin( omega * theta + phase)
- var amplitude = 42
- , theta = Math.PI * -8.5
- , omega = 0.1
- , phase = -1.52
- var colors = [
- '#D40067'
- , "#87AFC7"
- , '#00ff00'
- , '#ff0000'
- ]
- var n = 27
- , m = 62
- //interpolate over multiple colors
- var color_scale = function(i) {
- var num_interps = colors.length -1
- var ord = d3.scale.linear()
- .domain([0, n])
- .range([0, num_interps])
- var section = parseInt(ord(i))
- //console.log("section", section)
- var section_size = n / num_interps
- //get the two colors we want to interpolate between
- var col_range = [colors[section], colors[section+1]]
- var col_scale = d3.scale.linear()
- .domain([section * section_size, (section+1) * section_size])
- //.interpolate(d3.interpolateRgb)
- .interpolate(d3.interpolateHsl)
- .range(col_range)
- return col_scale(i)
- }
- /*
- var color = d3.scale.linear()
- .domain([0, n])
- //.interpolate(d3.interpolateRgb)
- .interpolate(d3.interpolateHsl)
- .range(['#D40067', '#4DA9DF'])
- */
- var color = color_scale
- var sw = parseInt(d3.select("svg").style("width"))
- //make the sin waves extend past the width a little
- sw += .1 * sw
- var sh = parseInt(d3.select("svg").style("height"))
- var lines = [ ];
- for (i in d3.range(n)) {
- var data = d3.range(m)
- lines.push({
- index: i,
- data: data
- })
- }
- var xscale = d3.scale.linear()
- .domain([0, m])
- .range([-.4*sw, sw])
- function line_maker( data ) {
- var freq = omega * data.index
- var svgline = d3.svg.line()
- .x(function(d,i) {
- return xscale(d);
- })
- .y(function(d,i) {
- var th = d/m * theta
- var ph = (n-data.index) * phase
- var y = amplitude * Math.sin(freq * th + ph );
- return y
- })
- .interpolate("basis")
- //.interpolate("linear")
- return svgline(data.data);
- }
- function lineenter(d, i) {
- d3.select(this).selectAll("path.path")
- .data([d])
- .enter()
- .append("svg:path")
- .attr("class", "path")
- .attr("stroke-width", stroke_width)
- //.attr("stroke-width", function(e,i) { return e.width;})
- .attr("stroke", "#fff")
- .attr("fill", "none")
- update_spacing()
- }
- function update_spacing()
- {
- var th = spacing * n;
- var hscale = d3.scale.linear()
- .domain([0, n])
- .range([0, sh])
- d3.selectAll("g.line path")
- .attr("transform", function(d, i) {
- //return "translate(" + [0, th - spacing * d.index] + ")";
- return "translate(" + [0, -11+sh/2.24 + th / 1.6 - spacing * d.index] + ")";
- })
- }
- var svg = d3.select("svg")
- .attr("width", sw)
- .attr("height", sh)
- .append("svg:g")
- var line = svg.selectAll("g.line")
- .data(lines)
- .enter().append("svg:g")
- .attr("class", "line")
- .each(lineenter);
- /*
- var opacity = d3.scale.linear()
- .domain([0, n])
- .range([1, .4])
- */
- d3.selectAll("g.line path")
- .attr("d", function(d,i) {
- return line_maker(d)
- })
- .attr("stroke", function(d,i) { return color(d.index);})
- .attr("opacity", opacity);
Add Comment
Please, Sign In to add comment