Tributary inlet

_.md

[ Launch: Tributary inlet ] 5417175 by Kelindar
[ Launch: Tributary inlet ] 5415300 by Kelindar
[ Launch: Tributary inlet ] 5415233 by Kelindar
[ Launch: Tributary inlet ] 5415145 by Kelindar
[ Launch: Tributary inlet ] 5414818 by Kelindar

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.cs":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.js":{"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}

inlet.js

// some constants
var tH = 10;
var tW = 8;
var tX = 80;
var tY = 24;
var aWidth  = tW * tX;
var aHeight = tH * tY;

// generate some random data in json representation
var dataset = [];
for(var i=0; i<tY;++i){
  for(var j=0; j<tX;++j){
    dataset[i *tX + j] = { 
      "time" : j,
      "usage" : Math.floor((Math.random()*3)+1),
      "cpu": i
    }
  }
}

// labels for the x axis and sliding window
var labels  = d3.range(1,tY + 1);
var slimits = [ 0, 300 ];
var swindow = [ 20, 50 ];

// Add an SVG element with the desired dimensions and margin.
var svg   = d3.select("svg");
var map   = svg.append("g");
var slide = svg.append("g");

// print axis labels
map
.selectAll("text")
.data(labels)
.enter()
.append("text")
.text(function(d){ return "Worker #" + d;})
.attr("font-size", tH)
.attr("y", function(d){ return d * tH;});

// foreach hardware thread, generate a timeline
var tiles = map
.selectAll(".tile")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "#4AC0DD")
.attr("class", "tile")
.attr("opacity", function(d){ return 1 / d.usage;  })
.attr("width", tW)
.attr("height", tH)
.attr("y", function(d){ return tH * d.cpu; })
.attr("x", function(d){ return 60 + d.time * tW; })
.attr("stroke", "#FFFFFF")
.attr("stroke-width", 1)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);

// on mouse over
function mouseOver(d){
	d3.select(this)
		.attr("fill", "#EE2C2C");
}

// on mouse out
function mouseOut(d){
	d3.select(this)
		.attr("fill", "#4AC0DD");
}

var scale = d3.scale
	.linear()
	.domain(slimits)
	.range([0, aWidth]);

/*var scrollAxis = d3.svg.axis()
	.scale(scale);

slide
.append("rect")
.attr("class", "scrollContainer")
.attr("fill", "#000FFF")
.attr("width", aWidth)
.attr("height", 30)
.attr("x", 60)
.attr("y", aHeight + 10);

slide
.append("svg:g")
.attr("class", "x axis")
.call(scrollAxis);*/


setInterval(function(){
  var xdat = [1,2,1,1,1,1,1,2,2,2];
  dataset.splice(0, tY);
  for(var i=0; i<tY;++i){
      dataset.push({ 
        "time" : j,
		"usage" : Math.floor((Math.random()*3)+1),
        "cpu": i
      });
	}
  
  tiles.data(xdat);
}, 500);