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.
Last active
September 12, 2017 02:58
-
-
Save IbrahimTanyalcin/2e478e178470c385656a90d3a4629220 to your computer and use it in GitHub Desktop.
lexicon-rainbow example: serverDownTime
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: cc-by-nc-nd-4.0 | |
| height: 1000 | |
| width: 1000 | |
| scrolling: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment