Tributary inlet

_.md

[ 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}},"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 = 5;

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

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

// foreach hardware thread, generate a timeline
d3.select("svg")
	.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("fill", "#4AC0DD")
	.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 50 + d.time * tW; })
	.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");
}