unicorn_soup

_.md

[ Launch: sin waves ] 8175771 by dvdrtrgn

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"unicorn_soup","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/SSCkJKO.png","inline-console":true}

inlet.js

/*jslint es5:true, white:false */
/*globals d3, trib, trib_options, tributary */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
(function () {

    //Try changing all these parameters
    //Layout properties
    var n = 35;
    var m = 30;
    trib.spacing = 7;
    trib.opacity = 0.3;
    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), 10);
        //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 = [];
    var i;
    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([-0.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 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] + ")";
        });
    }

    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();
    }

    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);
    
    line = void(0);
    
    /*
      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);

}());