Backup Overview - Model

_.md

[ Launch: Backup Overview ] d3c88e18e54eb5c72bea by dmann99

config.json

{"description":"Backup Overview - Model","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mydata.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mydata1.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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Jre4wtp.png"}

index.html

<div id="bkps" width=600 height=400></div>

inlet.js

// David Mann  |  http://ba6.us  |  @ba6dotus

// Y Axis : DB Name
// X Axis : Time

// Indicate start and end times of backups during a 24 hour period
// Roll through day from 00:00 to 23:59 (0 to 1439 minutes)
// Animate a 'cursor' to show position and sweep through the time period
// Show progress of backup data volume using relative dot sizes


/*************/
/* Constants */
/*************/
var duration = 8000;

var margin = {top: 30, right: 30, bottom: 60, left: 100} , 
    width = 700 - margin.left - margin.right , 
    height = 600 - margin.top - margin.bottom , 
    minutesInDay = 1440;

/********/
/* Data */
/********/

var data=tributary.mydata;

var cursorXpos = [0];

var xlabels = ["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a",
               "12p","1p","2p","3p","4p","5p","6p","7p","8p","9p","10p","11p",""];

/***************/
/* Scale Setup */
/***************/

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

var y =     d3.scale.linear()
              .domain([0, d3.max(data, function(d) { return d.index; } ) ])
              .range([ height-30, 0 ]);

var r =     d3.scale.linear()
              .domain([0, d3.max(data, function(d) { return d.size_gb; } ) ])
              .range([ 0, 150 ]);


var delay = d3.scale.linear()
              .domain([0,1440])
              .range([0,duration]);

/**************/
/* Draw graph */
/**************/

var chart = d3.select('#bkps')
              .append('svg')
              .attr('width', width + margin.right + margin.left)
              .attr('height', height + margin.top + margin.bottom)
              .attr('class', 'chart')

var main = chart.append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
                .attr('width', width)
                .attr('height', height)
                .attr('class', 'main')   

var g = main.append("svg:g"); 


// X and Y Labels 
g.selectAll("xlabelsTop")
 .data(xlabels)
 .enter()
 .append("svg:text")
 .attr("x", function (d,i) { return x(i*60); } )
 .attr("y", height)
 .text( function (d) { return d } )
 .style("font-size","10px");

g.selectAll("xlabelsBottom")
 .data(xlabels)
 .enter()
 .append("svg:text")
 .attr("x", function (d,i) { return x(i*60); } )
 .attr("y", -12)
 .text( function (d) { return d } )
 .style("font-size","10px");

g.selectAll("dblabels")
 .data(data)
 .enter()
 .append("svg:text")
 .attr("x",-90)
 .attr("y", function (d) { return y(d.index) +7; } )
 .text( function (d) { return d.dbname; } );

// X and Y Grid Lines
g.selectAll("ylines") 
 .data(xlabels)
 .enter()
 .append("svg:line")
 .attr("x1", function (d,i) { return x(i*60); } )
 .attr("y1", -10)
 .attr("x2",function (d,i) { return x(i*60); })
 .attr("y2",height-10)
 .style("stroke", "rgb(188,188,188)");

g.selectAll("xlines")
 .data(data)
 .enter()
 .append("svg:line")
 .attr("x1", function (d,i) { return x(d.start); } )
 .attr("y1", function (d) { return y(d.index); })
 .attr("x2",function (d,i) { return x(d.end); })
 .attr("y2",function (d) { return y(d.index); })
 .style("stroke", "rgb(255,101,101)");
  

// Draw the cursor  
var myCursor = g.selectAll("cursor")
                .data(cursorXpos)
                .enter() 
                .append("svg:line")
                .attr("x1", x(0) )
                .attr("y1", -10)
                .attr("x2", x(0) )
                .attr("y2", height-10)
                .attr("stroke","rgb(193,0,0)")
                .transition()
                .attr("x1",x(1440))
                .attr("x2",x(1440))
                .duration( duration )
                .ease("linear");     

// Set up the dots
g.selectAll("scatter-dots")
 .data(data)
 .enter()
 .append("svg:circle")
 .attr("cx", function (d,i) { return x(d.start); } )
 .attr("cy", function (d) { return y(d.index); } )
 .attr("r", 2)
 .attr("style","fill : red")
 .transition()
 .attr("cx",function (d,i) { return x(d.end); })
 .attr("r", function (d,i) { return d.size_gb/10; } )
 .delay( function (d,i) { return delay(d.start); } )
 .duration( function (d,i) { return delay(d.end-d.start); } )
 .ease("linear");

mydata.json

[
  {"dbname"  : "BKP1", 
   "start"   : "0",
   "end"     : "180",
   "size_gb" : "150",
   "index"   : "0"},


  {"dbname"  : "BKP2", 
   "start"   : "120",
   "end"     : "300",
   "size_gb" : "300",
   "index"   : "1"},

  {"dbname"  : "MONITOR", 
   "start"   : "240",
   "end"     : "600",
   "size_gb" : "50",
   "index"   : "2"},
  
  {"dbname"  : "ERP", 
   "start"   : "360",
   "end"     : "1200",
   "size_gb" : "350",
   "index"   : "3"},
  
  {"dbname"  : "LAB", 
   "start"   : "420",
   "end"     : "1200",
   "size_gb" : "150",
   "index"   : "4"},
  
  {"dbname"  : "HR", 
   "start"   : "560",
   "end"     : "1440",
   "size_gb" : "75",
   "index"   : "5"},
  
  {"dbname"  : "APP1", 
   "start"   : "800",
   "end"     : "950",
   "size_gb" : "75",
   "index"   : "6"},
  
  {"dbname"  : "APP2", 
   "start"   : "900",
   "end"     : "1000",
   "size_gb" : "75",
   "index"   : "7"},
  
  {"dbname"  : "SEC", 
   "start"   : "1000",
   "end"     : "1050",
   "size_gb" : "75",
   "index"   : "8"},
  
  {"dbname"  : "SOX", 
   "start"   : "1100",
   "end"     : "1440",
   "size_gb" : "125",
   "index"   : "9"}
]

mydata1.json

[
  {"dbname": "ERP", 
   "startdate": "2014-04-21T00:30:00.000Z",
   "enddate"  : "2014-04-21T10:30:00.000Z",
   "size"     : "20"},

  {"dbname": "PAYROLL", 
   "startdate": "2014-04-21T08:30:00.000Z",
   "enddate"  : "2014-04-21T14:30:00.000Z",
   "size"     : "200"},

    {"dbname": "CRM", 
     "startdate": "2014-04-21T15:00:00.000Z",
     "enddate"  : "2014-04-21T22:00:00.000Z",
     "size"     : "150"}

]

style.css

{}