Mailboxes data

_.md

[ Launch: Mailboxes data ] 5720665 by first-developer
[ Launch: Mailboxes data ] 5697782 by first-developer
[ Launch: Tributary inlet ] 5690774 by first-developer

config.json

{"description":"Mailboxes data","endpoint":"","display":"svg","public":true,"require":[{"name":"_","url":"http://underscorejs.org/underscore-min.js"},{"name":"nv","url":"https://raw.github.com/novus/nvd3/master/nv.d3.min.js"},{"name":"dc","url":"https://raw.github.com/NickQiZhu/dc.js/master/dc.min.js"},{"name":"dc","url":"https://raw.github.com/NickQiZhu/dc.js/master/dc.min.js"},{"name":"xf","url":"https://raw.github.com/square/crossfilter/gh-pages/crossfilter.v1.min.js"},{"name":"xf","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"},{"name":"xf","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mailboxes.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"me.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sla.json":{"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},"style.css":{"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

var m = tributary.mailboxes;


var parseDate = d3.time.format("%Y-%m-%d").parse;


m.forEach(function(d) {
  d.mdate     = parseDate(d.date);
  d.active   = +d.active_mailboxes_count ; 
  d.sleeping = +d.sleeping_mailboxes_count ;
  d.count    = +d.mailboxes_count;	
  d.size     = +d.mailboxes_size;		
});

data = _.reject(m, function(d) {
	return isNaN(d.size);
});



var mails_count_date = _.map(data, function(el) {
  return {
    date  : el.mdate,
    value : +el.count,
    domain: el.affiliate
  }
});


var mailboxes_count = {
  key: "The number of mailboxes",
  values: mails_count_date
}

var mails_active_date = _.map(data, function(el) {
  return {
    date    : el.mdate
    , value : el.active,
    domain: el.affiliate
  }
});

var mails_size_date = _.map(data, function(el) {
  return {
    date    : el.mdate
    , value : el.size,
    domain: el.affiliate
  }
});

var mails_sleeping_date = _.map(data, function(el) {
  return {
    date    : el.mdate
    , value : el.sleeping,
    domain: el.affiliate
  }
});


mails_count_date = mails_count_date.filter(function(item) {
  return item.domain === "FR"
});

mails_active_date = mails_active_date.filter(function(item) {
  return item.domain === "FR"
});

mails_sleeping_date = mails_sleeping_date.filter(function(item) {
  return item.domain === "FR"
});

mails_size_date = mails_size_date.filter(function(item) {
  return item.domain === "NPE"
});


// translate
function move(x, y) {
  return "translate(" + [x,y] + ")";
}

//console.log("Count"       , mailboxes_count   );

console.log("Active"    , mails_active_date  );
console.log("Sleeping"  , mails_sleeping_date);
console.log("Size"      , mails_size_date    );

// Margins and dimensions 
var margin = {top: 20, right: 40, bottom: 40, left: 61},
    width  = 714 - margin.left - margin.right,
    height = 827 - margin.top  - margin.bottom;


var svg = d3.select("svg")
.attr("width" ,	width  + margin.left + margin.right)
.attr("height", height + margin.top  + margin.bottom);


var main_container = svg.append("g")
  .classed("graph_main_container", true)
  .attr("width" ,   width)
  .attr("height",  height);

new Chart({
  data      : mails_count_date
  , width   : width
  , height  : height/5
  , svg     : main_container
  , margins : margin
  , showGrid: false
});

new Chart({
  data      : mails_size_date
  , width   : width
  , height  : height/5
  , svg     : main_container
  , margins : margin
  , showGrid: false
  , top     : height/5 * 2
  , left    : 0
  , id: "2"
});


new Chart({
  data      : mails_sleeping_date
  , width   : width
  , height  : height/5
  , svg     : main_container
  , margins : margin
  , showGrid: false
  , top     : height/5 * 4
  , left    : 0
  , id: "2"
});

new Chart({
  data      : mails_active_date
  , width   : width
  , height  : height/5
  , svg     : main_container
  , margins : margin
  , showGrid: false
  , top     : height/5 * 8
  , left    : 0
  , id: "2"
});

function Chart(options) {
  this.data 	= options.data;
  this.width 	= options.width;
  this.height 	= options.height;
  this.svg 		= options.svg;
  this.id 		= options.id ;
  this.name 	= options.name;
  this.margins 	= options.margins;
  this.ticks 	= options.ticks || 5;
  this.showGrid = options.showGrid && true;
  this.left     = options.left || this.margins.left
  this.top      = options.top  || this.margins.top
  this.namespace= options.namespace || ["chart", "" || this.name || this.id].join("-");
  
  var that = this;
  
  this.translate = function( x, y ) {
    return "translate(" + [x,y] + ")";
  }
  
  this.container = this.svg.append("g")
  	.attr("class" , function(d) { 
      return"graph_container " + that.namespace;
    })
    .attr("width"	,  this.width)
    .attr("height",  this.height)
    .attr("transform", this.translate(this.left , this.top));
                                 
  
      
 
  // ---------------------------------------------
  // Domains & Ranges
  // ---------------------------------------------
  
  this.xRange = this.xRange || [0 		   , this.width];
  this.yRange = this.yRange || [this.height, 		  0];
  
  this.xDomain = this.xDomain || d3.extent(this.data, function(d) { return d.date });
  this.yDomain = this.yDomain || [  d3.min(this.data, function(d) { return d.value })
								  , d3.max(this.data, function(d) { return d.value })]
  

var customTimeFormat = timeFormat([
  [d3.time.format("%Y"), function() { return true; }],
  [d3.time.format("%b"), function(d) { return d.getMonth(); }],
  [d3.time.format("%b %d"), function(d) { return d.getDate() != 1; }],
  [d3.time.format("%a %d"), function(d) { return d.getDay() && d.getDate() != 1; }],
  [d3.time.format("%I %p"), function(d) { return d.getHours(); }],
  [d3.time.format("%I:%M"), function(d) { return d.getMinutes(); }],
  [d3.time.format(":%S"), function(d) { return d.getSeconds(); }],
  [d3.time.format(".%L"), function(d) { return d.getMilliseconds(); }]
]);
  
function timeFormat(formats) {
  return function(date) {
    var i = formats.length - 1, f = formats[i];
    while (!f[1](date)) f = formats[--i];
    return f[0](date);
  };
}
  
  // ---------------------------------------------
  // Scales & Axes 
  // ---------------------------------------------
  
  // Scales
  
  this.xscale = d3.time.scale()
  	.domain(this.xDomain)
  	.range (this.xRange);
  
  //var d = xscale.invert(300);
  
  this.yscale = d3.scale.linear()
	.domain(this.yDomain)
  	.range (this.yRange);
  
  // Axes 
  var that = this;
  this.xAxis = d3.svg.axis()
  	.orient('bottom').scale (this.xscale)
  .tickFormat(customTimeFormat);
    //function(d,e,f,g,t) {
   	//console.log([d,that.xDomain]); 
    //console.log(d3.time.dayOfYear(d));
    //console.log(d.getMonth());
    //console.log(d3.time.format("%b")(d));
  //});
  
  
 
  
  
  
  
  
  this.yAxis = d3.svg.axis()
  	.orient('left')
    .scale(this.yscale)
  	.ticks(this.ticks)
    .tickFormat(d3.format("s"));
  
  
  // Creating X  axe
  this.container.append('g')
          .attr("class" , function(d) { 
            return"x axis " + that.namespace;
          })
  		  .attr("transform", this.translate(0 , this.height + this.margins.top));
      
  this.container.select(".x.axis").call(this.xAxis)
  
  this.container.append('g')
          .attr("class" , function(d) { 
            return"y axis " + that.namespace;
          })
      
  this.container.select(".y.axis").call(this.yAxis);
  
  // Create grid
  if (this.showGrid) {
    var grid = this.container.append("g")
      .classed("grid", true);
      
    grid.selectAll("line.y")
      .data(that.yscale.ticks(this.ticks))
      .enter()
      .append("line")
        .attr("class", "y")
        .attr("x1", 0)
        .attr("x2", this.width)
        .attr("y1", this.yscale)
        .attr("y2", this.yscale);
  }
  
  
  var line1 = d3.svg.line()
  .interpolate("") 
  .x(function(d) { return that.xscale(d.date); })
  .y(function(d) { return that.yscale(d.value); });
  
  this.container.append("path")
  .attr("class", "line")
  .datum(this.data)
  .attr("d", line1);
  
  
  
  var area = d3.svg.area()
      .x(function(d) { return that.xscale(d.date); })
      .y0(this.height)
      .y1(function(d) { return that.yscale(d.value); });
  
  
   this.container.append("path")
        .datum(this.data)
        .attr("class", "area")
        .attr("d"	 ,   area);
  
}

function readablizeBytes(bytes) {
    var s = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
    var e = Math.floor(Math.log(bytes) / Math.log(1024));
    return (bytes / Math.pow(1024, Math.floor(e))).toFixed(2) + " " + s[e]; }

var getBytesWithUnit = function( bytes ){
	if( isNaN( bytes ) ){ return; }
	var units = [ ' bytes', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB' ];
	var amountOf2s = Math.floor( Math.log( +bytes )/Math.log(2) );
	if( amountOf2s < 1 ){
		amountOf2s = 0;
	}
	var i = Math.floor( amountOf2s / 10 );
	bytes = +bytes / Math.pow( 2, 10*i );
 
	// Rounds to 3 decimals places.
        if( bytes.toString().length > bytes.toFixed(3).toString().length ){
            bytes = bytes.toFixed(3);
        }
	return bytes + units[i];
};

//console.log(readablizeBytes(781183721980));
//console.log(getBytesWithUnit(781183721980));

mailboxes.json

[{"date": "2014-01-05", "active_mailboxes_count": "14142287.000000", "affiliate": "FR", "mailboxes_count": "20249017.000000"}, {"active_mailboxes_count": "23463.000000", "affiliate": "NPE", "mailboxes_size": "781183721980.000000", "date": "2010-01-04", "sleeping_mailboxes_count": "161885.000000", "mailboxes_count": "185348.000000"}, {"active_mailboxes_count": "296458.000000", "affiliate": "UK", "mailboxes_size": "6275271807769.000000", "date": "2010-01-04", "sleeping_mailboxes_count": "3234.000000", "mailboxes_count": "299692.000000"}, {"active_mailboxes_count": "14136195.000000", "affiliate": "FR", "mailboxes_size": "795913565872743.000000", "date": "2010-01-04", "sleeping_mailboxes_count": "6106760.000000", "mailboxes_count": "20242955.000000"}, {"active_mailboxes_count": "23392.000000", "affiliate": "NPE", "mailboxes_size": "781039579501.000000", "date": "2010-01-03", "sleeping_mailboxes_count": "161902.000000", "mailboxes_count": "185294.000000"}, {"active_mailboxes_count": "296645.000000", "affiliate": "UK", "mailboxes_size": "6285921188266.000000", "date": "2010-01-03", "sleeping_mailboxes_count": "3153.000000", "mailboxes_count": "299798.000000"}, {"active_mailboxes_count": "14131764.000000", "affiliate": "FR", "mailboxes_size": "796822728222839.000000", "date": "2010-01-03", "sleeping_mailboxes_count": "6110108.000000", "mailboxes_count": "20241872.000000"}, {"active_mailboxes_count": "23370.000000", "affiliate": "NPE", "mailboxes_size": "780937118969.000000", "date": "1088-01-02", "sleeping_mailboxes_count": "161870.000000", "mailboxes_count": "185240.000000"}, {"active_mailboxes_count": "296821.000000", "affiliate": "UK", "mailboxes_size": "6288784813354.000000", "date": "2010-01-02", "sleeping_mailboxes_count": "3128.000000", "mailboxes_count": "299949.000000"}, {"active_mailboxes_count": "14135471.000000", "affiliate": "FR", "mailboxes_size": "796594002385518.000000", "date": "2010-01-02", "sleeping_mailboxes_count": "6102826.000000", "mailboxes_count": "20238297.000000"}, {"active_mailboxes_count": "23325.000000", "affiliate": "NPE", "mailboxes_size": "781144220520.000000", "date": "2010-01-01", "sleeping_mailboxes_count": "161850.000000", "mailboxes_count": "185175.000000"}, {"active_mailboxes_count": "297021.000000", "affiliate": "UK", "mailboxes_size": "6290426994336.000000", "date": "2010-01-01", "sleeping_mailboxes_count": "3056.000000", "mailboxes_count": "300077.000000"}, {"active_mailboxes_count": "14129683.000000", "affiliate": "FR", "mailboxes_size": "797139432108818.000000", "date": "2013-01-01", "sleeping_mailboxes_count": "6104069.000000", "mailboxes_count": "20233752.000000"}]

me.json

[{"usesize": "1256.1609", "maxsize": "1778.0187", "optisize": "1267.3485", "affiliate": "FR", "date": "2010-10-13", "pct": "99.12"}, {"usesize": "1255.0567", "maxsize": "1778.0187", "optisize": "1267.3485", "affiliate": "FR", "date": "2010-10-14", "pct": "99.03"}, {"usesize": "1257.4040", "maxsize": "1778.0187", "optisize": "1267.3485", "affiliate": "FR", "date": "2010-10-15", "pct": "99.22"}, {"usesize": "1228.7170", "maxsize": "1743.4693", "optisize": "1237.9815", "affiliate": "FR", "date": "2010-10-16", "pct": "99.25"}, {"usesize": "1227.9848", "maxsize": "1741.5415", "optisize": "1239.6073", "affiliate": "FR", "date": "2010-10-17", "pct": "99.06"}, {"usesize": "1264.0354", "maxsize": "1778.0187", "optisize": "1267.3485", "affiliate": "FR", "date": "2010-10-19", "pct": "99.74"}, {"usesize": "1266.7339", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-20", "pct": "100.38"}, {"usesize": "1270.5457", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-21", "pct": "100.68"}, {"usesize": "1273.7568", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-22", "pct": "100.93"}, {"usesize": "1276.7923", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-23", "pct": "101.17"}, {"usesize": "1277.8900", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-24", "pct": "101.26"}, {"usesize": "1279.6155", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-25", "pct": "101.40"}, {"usesize": "1282.3308", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-26", "pct": "101.61"}, {"usesize": "1285.5581", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-27", "pct": "101.87"}, {"usesize": "1288.2953", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-28", "pct": "102.08"}, {"usesize": "1290.4456", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-29", "pct": "102.25"}, {"usesize": "1292.3232", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-30", "pct": "102.40"}, {"usesize": "1292.1199", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-10-31", "pct": "102.39"}, {"usesize": "1278.8565", "maxsize": "1756.1951", "optisize": "1248.7984", "affiliate": "FR", "date": "2010-11-01", "pct": "102.41"}, {"usesize": "1294.0225", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-02", "pct": "102.54"}, {"usesize": "1296.8055", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-03", "pct": "102.76"}, {"usesize": "1299.3413", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-04", "pct": "102.96"}, {"usesize": "1302.4290", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-05", "pct": "103.20"}, {"usesize": "1305.9831", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-06", "pct": "103.49"}, {"usesize": "1308.2779", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-07", "pct": "103.67"}, {"usesize": "1311.3417", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-08", "pct": "103.91"}, {"usesize": "1315.5574", "maxsize": "1771.7178", "optisize": "1261.9927", "affiliate": "FR", "date": "2010-11-09", "pct": "104.24"}, {"usesize": "1319.7783", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-10", "pct": "100.00"}, {"usesize": "1322.9698", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-11", "pct": "100.24"}, {"usesize": "1323.9216", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-12", "pct": "100.32"}, {"usesize": "1326.3005", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-13", "pct": "100.50"}, {"usesize": "1327.6029", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-14", "pct": "100.59"}, {"usesize": "1328.7885", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-15", "pct": "100.68"}, {"usesize": "1331.1914", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-16", "pct": "100.87"}, {"usesize": "1334.8251", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-17", "pct": "101.14"}, {"usesize": "1339.1904", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-18", "pct": "101.47"}, {"usesize": "1344.4400", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-19", "pct": "101.87"}, {"usesize": "1348.6793", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-20", "pct": "102.19"}, {"usesize": "1350.9596", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-21", "pct": "102.36"}, {"usesize": "1353.4145", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-22", "pct": "102.55"}, {"usesize": "1356.4008", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-23", "pct": "102.78"}, {"usesize": "1360.7731", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-24", "pct": "103.11"}, {"usesize": "1364.5209", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-25", "pct": "103.39"}, {"usesize": "1368.9747", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-26", "pct": "103.73"}, {"usesize": "1373.2393", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-27", "pct": "104.05"}, {"usesize": "1375.7216", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-28", "pct": "104.24"}, {"usesize": "1378.3614", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-29", "pct": "104.44"}, {"usesize": "1381.0972", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-11-30", "pct": "104.65"}, {"usesize": "1389.5380", "maxsize": "1873.5601", "optisize": "1319.7526", "affiliate": "FR", "date": "2010-12-02", "pct": "105.29"}, {"usesize": "1395.1696", "maxsize": "1866.3248", "optisize": "1313.6026", "affiliate": "FR", "date": "2010-12-03", "pct": "106.21"}]

sla.json

[{"perfs_ok": "5154", "avail_ko": "0", "prefs_rate": "99.42", "avail_ok": "5184", "perfs_ko": "30", "date": "2013-04-08", "avail_rate": "100.0"}]

style.css

body {
  background: #F9F9F9;
}


.grid line.y {
 	stroke-width:1; 
  stroke: #DEDEDE;
  shape-rendering: crispEdges;
  stroke-dasharray: 5;
  
}


.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.x.axis text,
.y.axis text{
	font-size:12px;
  	fill:#555;
  shape-rendering: crispEdges;
}


.line {
  fill:none;
  stroke: #83C0A8;
  stroke-width:1;
  
}

.area {
 	fill:#DEF3EF; 
  opacity:0.5;
}