line for tty56

_.md

[ Launch: line for tty56 ] 6135698 by enjalot

config.json

{"description":"line for tty56","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":true,"loop":true,"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/iBXuiz6.png"}

inlet.js

var update_total;

var n = 40,
    random = d3.random.normal(0, .2);
var data = d3.range(n);//.map(random);
var data_rand = d3.range(40).map(random);
var data_undera = d3.range(40).map(random);
var data_rasp = d3.range(40).map(random);

var margin = {top: 20, right: 10, bottom: 20, left: 40},
    width = 250 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .domain([0, n - 1])
    .range([0, width]);

var y = d3.scale.linear()
    //.domain([[0, 10],[0,10]])
    .domain([0, 5])
    .range([height, 0]);

var line = d3.svg.line()
    .x(function (d, i) {
        return x(i);
    })
    .y(function (d, i) {
        return y(d);
    });

var svg = d3.select("svg")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
    .attr("class", "y axis")
    .call(d3.svg.axis().scale(y).orient("left"));

var path_rand = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data_rand])
    .attr("class", "random")
    .attr("d", line);


var path_undera = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data_undera])
    .attr("class", "underlay_aware")
    .attr("d", line);

var path_rasp = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .data([data_rasp])
    .attr("class", "rasp")
    .attr("d", line);

/*
var path = svg.selectAll(".approach")
    //.data()
    .data([data])
    //.data([over1,over2])
    .append("g")
    .attr("clip-path", "url(#clip)")
    .append("path")
    .attr("class", "approach")
    .attr("d", line);
    */
 
update_total = function (total, overlay_alg) {
    total = total * 0.150;
    //console.log(total);
    //data.push(total);
    data_rand.push(total);
    data_undera.push(total+1);
    data_rasp.push(total+2);
    //console.log(hostname+": "+total);

    path_rand
        .attr("d", line)
        .attr("transform", null)
        .attr("transform", "translate(" + x(-0.5) + ")");

    path_undera
        .attr("d", line)
        .attr("transform", null)
        //.transition()
        //.duration(100)
        //.ease("linear")
        .attr("transform", "translate(" + x(-0.5) + ")");
    path_rasp
        .attr("d", line)
        .attr("transform", null)
        //.transition()
        //.duration(100)
        //.ease("linear")
        .attr("transform", "translate(" + x(-0.5) + ")");


    // pop the old data point off the front
    //data.shift();
    data_rand.shift();
    data_undera.shift();
    data_rasp.shift();
};

tributary.run = function(g, t) {
  update_total(1 + t);
}

style.css

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
 
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

path {
  fill: none;
}
.random {
  stroke: #338FB3;
}
.underlay_aware {
  stroke: #19AD19;
}
.rasp {
  stroke: #CC4040;
}