IbrahimTanyalcin/.block

## .block
license: cc-by-nc-nd-4.0
height: 1000
width: 1000
scrolling: yes

## README.md

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    This is an example of how you can use lexicon-rainbow to emulate downtime through out the year with some random data.
First, a random dataset of 365 (or 366 in this case, 2016 is a leap year) days with each day divided into 24 hours is created.
Then 3 instances of lexicon-rainbow is created. One with GUI, one wihout GUI and one with a custom GUI.
You can also get the d3 v3 version here.

  

  

## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js"></script>
<style type ="text/css">
</style>
</head>
<body>
<div id="containerDiv" style="margin:auto;"></div>
<script type="text/javascript">
!function(){
	////////////////////////////////////////////////////////////////////
	//////////////////DAYS OF 2016 BUNDLED INTO WEEKS///////////////////
	////////////////////////////////////////////////////////////////////
	var interval = 24*60*60*1000;
	var start = (new Date(2016,0,1)).getTime();
	var days = [],
		weeks = [[]],
		hours = Array.apply(null,Array(24)).map(function(){return 1});
	for (var i = 0,D,d,W = weeks[weeks.length-1];i<=365;++i){//2016 leap day
		D = new Date(start+i*interval);
		d = D.toDateString();
		days.push(d);
		D.getDay() === 1 && W.length ? (weeks.push([]),W = weeks[weeks.length-1]) : void(0);
		W.push(d);
	}
	////////////////////////////////////////////////////////////////////
	/////////////////////////MAIN DATA STRUCTURE////////////////////////
	////////////////////////////////////////////////////////////////////
	var output = {
		ordinal:[],
		linear:[
			{
				axis:"lightgray",
				name: "Days",
				mode: "stack",
				gMode: "justify",
				domain: [0,24],
				glyph: "./server.png",
				categories:{}
			}
		]
	};
	(function(ordinal,linearCategories){
		weeks.forEach(function(d,i){
			ordinal[i] = {
				name: getDayName(d[0])+"-"+getDayName(d[d.length-1]),
				mode: "stackEqual",
				categories:(function(){
					return Object.defineProperties(
						{},
						d.reduce(function(ac,dd,ii){
							ac[getDayName(dd)] = {
								value: ii,
								configurable: true,
								writable: true,
								enumerable: true
							}
							return ac;
						},{})
					)
				})(),
				colors: (function(){
					return Object.defineProperties(
						{},
						d.reduce(function(ac,dd,ii){
							var strokeNFill = ii & 1 ? ["Gray"] : ["Black"];
							ac[getDayName(dd)] = {
								value: Array.prototype.concat.apply(
									strokeNFill,
									[hours.map(function(){return Math.random()<0.25 ? "Crimson" : "Lime"}),strokeNFill]
								),
								configurable: true,
								writable: true,
								enumerable: true
							}
							return ac;
						},{})
					)
				})()
			}
		})
		days.forEach(function(d,i){
			Object.defineProperty(
				linearCategories,
				getDayName(d),
				{
					value: {intervals: hours.slice()},
					configurable: true,
					writable: true,
					enumerable: true
				}
			)
		})
		function getDayName (dateString){
			return dateString.split(" ").slice(0,-1).join(" ");
		}
	})(output.ordinal,output.linear[0].categories);
	/////////////////////////////////////////////////////////////////////////////
	//3 INSTANCES ON THE SAME DATA, 1 w/ GUI, 1 w/o GUI and 1 w/ CUSTOM VIEWBOX//
	/////////////////////////////////////////////////////////////////////////////
	Array.apply(null,Array(3)).forEach(function(d,i){
		(new LexiconRainbow)
		.container("#containerDiv")
		.forceStyle()
		.GUI(
			i % 3 ? false : true,
			[undefined,undefined,{x:-20,w:20,h:-120}][i]
		)
		.w(600)
		.h(200)
		.sW("800px")
		.sH("auto")
		.position("relative")
		.sTop("0px")
		.sLeft("0px")
		.sMargin("0px auto 0px auto")
		.lexID("lexiconRainbow"+i)
		.shapeRendering("crispEdges")
		.input(output)
		.append(true)
		.render();
	})
}()
</script>
</body>
</html>

## server.png

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              server.png
            
          
        
      
    
    

        
            
        
    

  

## thumbnail.png

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              thumbnail.png
	license: cc-by-nc-nd-4.0
	height: 1000
	width: 1000
	scrolling: yes
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js"></script>
	<style type ="text/css">
	</style>
	</head>
	<body>
	<div id="containerDiv" style="margin:auto;"></div>
	<script type="text/javascript">
	!function(){
	////////////////////////////////////////////////////////////////////
	//////////////////DAYS OF 2016 BUNDLED INTO WEEKS///////////////////
	////////////////////////////////////////////////////////////////////
	var interval = 246060*1000;
	var start = (new Date(2016,0,1)).getTime();
	var days = [],
	weeks = [[]],
	hours = Array.apply(null,Array(24)).map(function(){return 1});
	for (var i = 0,D,d,W = weeks[weeks.length-1];i<=365;++i){//2016 leap day
	D = new Date(start+i*interval);
	d = D.toDateString();
	days.push(d);
	D.getDay() === 1 && W.length ? (weeks.push([]),W = weeks[weeks.length-1]) : void(0);
	W.push(d);
	}
	////////////////////////////////////////////////////////////////////
	/////////////////////////MAIN DATA STRUCTURE////////////////////////
	////////////////////////////////////////////////////////////////////
	var output = {
	ordinal:[],
	linear:[
	{
	axis:"lightgray",
	name: "Days",
	mode: "stack",
	gMode: "justify",
	domain: [0,24],
	glyph: "./server.png",
	categories:{}
	}
	]
	};
	(function(ordinal,linearCategories){
	weeks.forEach(function(d,i){
	ordinal[i] = {
	name: getDayName(d[0])+"-"+getDayName(d[d.length-1]),
	mode: "stackEqual",
	categories:(function(){
	return Object.defineProperties(
	{},
	d.reduce(function(ac,dd,ii){
	ac[getDayName(dd)] = {
	value: ii,
	configurable: true,
	writable: true,
	enumerable: true
	}
	return ac;
	},{})
	)
	})(),
	colors: (function(){
	return Object.defineProperties(
	{},
	d.reduce(function(ac,dd,ii){
	var strokeNFill = ii & 1 ? ["Gray"] : ["Black"];
	ac[getDayName(dd)] = {
	value: Array.prototype.concat.apply(
	strokeNFill,
	[hours.map(function(){return Math.random()<0.25 ? "Crimson" : "Lime"}),strokeNFill]
	),
	configurable: true,
	writable: true,
	enumerable: true
	}
	return ac;
	},{})
	)
	})()
	}
	})
	days.forEach(function(d,i){
	Object.defineProperty(
	linearCategories,
	getDayName(d),
	{
	value: {intervals: hours.slice()},
	configurable: true,
	writable: true,
	enumerable: true
	}
	)
	})
	function getDayName (dateString){
	return dateString.split(" ").slice(0,-1).join(" ");
	}
	})(output.ordinal,output.linear[0].categories);
	/////////////////////////////////////////////////////////////////////////////
	//3 INSTANCES ON THE SAME DATA, 1 w/ GUI, 1 w/o GUI and 1 w/ CUSTOM VIEWBOX//
	/////////////////////////////////////////////////////////////////////////////
	Array.apply(null,Array(3)).forEach(function(d,i){
	(new LexiconRainbow)
	.container("#containerDiv")
	.forceStyle()
	.GUI(
	i % 3 ? false : true,
	[undefined,undefined,{x:-20,w:20,h:-120}][i]
	)
	.w(600)
	.h(200)
	.sW("800px")
	.sH("auto")
	.position("relative")
	.sTop("0px")
	.sLeft("0px")
	.sMargin("0px auto 0px auto")
	.lexID("lexiconRainbow"+i)
	.shapeRendering("crispEdges")
	.input(output)
	.append(true)
	.render();
	})
	}()
	</script>
	</body>
	</html>