Tributary inlet

_.md

[ Launch: Tributary inlet ] 7036573 by jzgit

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/BlKFtQi.png"}

inlet.js

// custom d3 javascript

// data comes from uploaded data to vida.io
// if you have your own data, overwrite its value
// drawing area is #canvas, define var svg = d3.select("#canvas")

alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

    var width = 960,
        height = 500;

    var svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(16," + (height / 2) + ")");

    function update(data) {

        // DATA JOIN
        // Join new data with old elements, if any.
        var text = svg.selectAll("text")
            .data(data, function(d) { return d; });

        // UPDATE
        // Update old elements as needed.
        text.attr("class", "update")
            .transition()
            .duration(750)
            .attr("x", function(d, i) { return i * 32; });

        // ENTER
        // Create new elements as needed.
        text.enter().append("text")
            .attr("class", "enter")
            .attr("dy", ".35em")
            .attr("y", -60)
            .attr("x", function(d, i) { return i * 32; })
            .style("fill-opacity", 1e-6)
            .text(function(d) { return d; })
            .transition()
            .duration(750)
            .attr("y", 0)
            .style("fill-opacity", 1);

        // EXIT
        // Remove old elements as needed.
        text.exit()
            .attr("class", "exit")
            .transition()
            .duration(750)
            .attr("y", 60)
            .style("fill-opacity", 1e-6)
            .remove();
    }

// The initial display.
    update(alphabet);

// Grab a random sample of letters from the alphabet, in alphabetical order.
    setInterval(function() {
        update(shuffle(alphabet)
            .slice(0, Math.floor(Math.random() * 26))
            .sort());
    }, 100000);

// Shuffles the input array.
    function shuffle(array) {
        var m = array.length, t, i;
        while (m) {
            i = Math.floor(Math.random() * m--);
            t = array[m], array[m] = array[i], array[i] = t;
        }
        return array;
    }