Tributary inlet

_.md

[ Launch: Tributary inlet ] 81adf5aea7f60c0b704b by willium

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/DcDq8f0.png"}

inlet.js

var svg = d3.select("svg").append("svg")
    .attr("width", window.innerWidth)
    .attr("height", window.innerHeight);

var trackData = [[
  [480, 200],
  [580, 400],
  [680, 100],
  [780, 300],
  [180, 300],
  [280, 100],
  [380, 400]
],[
  [480, 500],
  [580, 600],
  [680, 700],
  [780, 800],
  [180, 800],
  [280, 700],
  [380, 600]
]];

var tracks = svg.selectAll("g")
    .data(trackData)
    .enter()
        .append("path")
        .attr('points', function(d, i) {
            return [d];
        })
        .attr('id', function(d, i) {
            return "track-" + i;
        })
        .attr("d", d3.svg.line()
            .tension(0) // Catmull–Rom
            .interpolate("linear")
        );
tracks.style("fill", "none");
tracks.style("stroke", "black");
tracks.style("strok-width", "2px");



var cars = [];

function refreshCars() {
    var circles = svg.selectAll("circle")
        .data(cars);

    circles.enter()
        .append("circle")
        .style("fill", "steelblue")
        .attr("r", 10)
        .attr("id", function(d, i) {
            return "car-" + i;
        })
        .attr("transform", function(d, i) {
            return "translate(" + trackData[d.track][0] + ")"
        })
        .transition()
        .duration(15000)
        .ease("linear")
        .attrTween("transform", translateAlong(tracks[0]))
        .each("end", function(d, i) {
            this.remove();
        });

    circles.exit().remove();
}

function transition() {

}

function translateAlong(ph) {
    return function(d, i, a) {
        var l = ph[d.track].getTotalLength();
        return function(t) {
            var p = ph[d.track].getPointAtLength(t * l);
            return "translate(" + p.x + "," + p.y + ")";
        };
    };
}

function addCarToTrack(id) {
    var car = {
        "track": id
    }
    cars.push(car)
    refreshCars()

    setTimeout(function() {
        addCarToTrack(id)
    }, 2000);
}

addCarToTrack(0);
addCarToTrack(1);