Skip to content

Instantly share code, notes, and snippets.

@georules
Created December 21, 2013 22:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save georules/8076173 to your computer and use it in GitHub Desktop.
Save georules/8076173 to your computer and use it in GitHub Desktop.
sin waves
{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"sin waves","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/SKuNVhI.png"}
//Try changing all these parameters
//Layout properties
var n = 35;
var m = 30;
trib.spacing = 20.769230769230802;
trib.opacity = 0.8; trib_options.opacity = {"min":0, "max":1};
trib.stroke_width = 10;
//Sin wave function
//y = amplitude * sin( omega * theta + phase)
trib.amplitude = 21;
trib.theta = 11;
trib.omega = 0.1;
trib.phase = 0.5;
var colors = [
'#D40067'
, '#4DA9DF'
, '#00ff00'
, '#ff0000'
]
//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 = tributary.sw * 1.1;//parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
//sw += .1 * sw
var sh = tributary.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([-.1*sw, sw])
function line_maker( data ) {
var freq = trib.omega * data.index
var svgline = d3.svg.line()
.x(function(d,i) {
return xscale(d);
})
.y(function(d,i) {
var th = d/m * trib.theta
var ph = (n-data.index) * trib.phase
var y = trib.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", trib.stroke_width)
//.attr("stroke-width", function(e,i) { return e.width;})
.attr("stroke", "#fff")
.attr("fill", "none")
update_spacing()
}
function update_spacing()
{
var th = trib.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, 10+sh/2 + th / 2 - trib.spacing * d.index] + ")";
})
}
var svg = d3.select("svg")
.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", trib.opacity);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment