This is a histogram retrieved from the predicted apocalyptic events on wikipedia with a bit of humor added on.
Built with blockbuilder.org
Created
November 9, 2015 21:13
-
-
Save anonymous/3acd2fe76ec749be03fd to your computer and use it in GitHub Desktop.
fresh block
This file contains hidden or 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> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <script src='//d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
| <script src='//dimplejs.org/dist/dimple.v2.1.0.min.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 950px; | |
| height: 600px; | |
| } | |
| </style> | |
| </head> | |
| <body > | |
| <div id = 'chart17e0586f57cd' class = 'rChart dimple'></div> | |
| <script type="text/javascript"> | |
| var opts = { | |
| "dom": "chart17e0586f57cd", | |
| "width": 950, | |
| "height": 600, | |
| "xAxis": { | |
| "type": "addCategoryAxis", | |
| "showPercent": false | |
| }, | |
| "yAxis": { | |
| "type": "addMeasureAxis", | |
| "showPercent": false | |
| }, | |
| "zAxis": [], | |
| "colorAxis": [], | |
| "defaultColors": [], | |
| "layers": [], | |
| "legend": { | |
| "x": 780, | |
| "y": 100, | |
| "width": 60, | |
| "height": 300, | |
| "verticalAlign": "right" | |
| }, | |
| "x": "Date", | |
| "y": "Count", | |
| "groups": "grpnme", | |
| "type": "bar", | |
| "bounds": { | |
| "x": 50, | |
| "y": 50, | |
| "height": 300, | |
| "width": 700 | |
| }, | |
| "id": "chart17e0586f57cd" | |
| }, | |
| data = [{"Date":"3/28/1905","Count":1,"time":"0:00:00","group":1,"value":1,"grpnme":"The End is Coming"},{"Date":"7/21/1915","Count":1,"time":"1:00:00","group":1,"value":2,"grpnme":"The End is Coming"},{"Date":"4/28/1918","Count":1,"time":"2:00:00","group":1,"value":3,"grpnme":"The End is Coming"},{"Date":"9/7/1920","Count":1,"time":"3:00:00","group":1,"value":4,"grpnme":"The End is Coming"},{"Date":"5/11/1925","Count":1,"time":"4:00:00","group":1,"value":5,"grpnme":"The End is Coming"},{"Date":"1/22/1935","Count":1,"time":"5:00:00","group":1,"value":6,"grpnme":"The End is Coming"},{"Date":"7/8/1936","Count":1,"time":"6:00:00","group":1,"value":7,"grpnme":"The End is Coming"},{"Date":"7/4/1941","Count":1,"time":"7:00:00","group":1,"value":8,"grpnme":"The End is Coming"},{"Date":"1/17/1943","Count":1,"time":"8:00:00","group":1,"value":9,"grpnme":"The End is Coming"},{"Date":"7/20/1947","Count":1,"time":"9:00:00","group":1,"value":10,"grpnme":"The End is Coming"},{"Date":"3/19/1954","Count":1,"time":"10:00:00","group":1,"value":11,"grpnme":"The End is Coming"},{"Date":"8/14/1959","Count":1,"time":"11:00:00","group":1,"value":12,"grpnme":"The End is Coming"},{"Date":"2/26/1962","Count":1,"time":"12:00:00","group":1,"value":13,"grpnme":"The End is Coming"},{"Date":"2/28/1967","Count":2,"time":"13:00:00","group":2,"value":14,"grpnme":"Really, it's happening"},{"Date":"6/11/1969","Count":2,"time":"14:00:00","group":2,"value":15,"grpnme":"Really, it's happening"},{"Date":"8/12/1972","Count":1,"time":"15:00:00","group":1,"value":16,"grpnme":"The End is Coming"},{"Date":"1/11/1973","Count":1,"time":"16:00:00","group":1,"value":17,"grpnme":"The End is Coming"},{"Date":"4/4/1975","Count":2,"time":"17:00:00","group":2,"value":18,"grpnme":"Really, it's happening"},{"Date":"5/24/1976","Count":2,"time":"18:00:00","group":2,"value":19,"grpnme":"Really, it's happening"},{"Date":"9/14/1977","Count":2,"time":"19:00:00","group":2,"value":20,"grpnme":"Really, it's happening"},{"Date":"11/28/1980","Count":1,"time":"20:00:00","group":1,"value":21,"grpnme":"The End is Coming"},{"Date":"11/3/1981","Count":1,"time":"21:00:00","group":1,"value":22,"grpnme":"The End is Coming"},{"Date":"2/2/1982","Count":4,"time":"22:00:00","group":3,"value":23,"grpnme":"Seriously, it's going down"},{"Date":"3/7/1985","Count":1,"time":"23:00:00","group":1,"value":24,"grpnme":"The End is Coming"},{"Date":"2/20/1987","Count":2,"time":"0:00:00","group":2,"value":25,"grpnme":"Really, it's happening"},{"Date":"12/9/1988","Count":2,"time":"1:00:00","group":2,"value":26,"grpnme":"Really, it's happening"},{"Date":"7/4/1989","Count":1,"time":"2:00:00","group":1,"value":27,"grpnme":"The End is Coming"},{"Date":"12/16/1990","Count":1,"time":"3:00:00","group":1,"value":28,"grpnme":"The End is Coming"},{"Date":"8/5/1991","Count":2,"time":"4:00:00","group":2,"value":29,"grpnme":"Really, it's happening"},{"Date":"11/3/1992","Count":3,"time":"5:00:00","group":3,"value":30,"grpnme":"Seriously, it's going down"},{"Date":"4/25/1993","Count":1,"time":"6:00:00","group":1,"value":31,"grpnme":"The End is Coming"},{"Date":"5/11/1994","Count":4,"time":"7:00:00","group":3,"value":32,"grpnme":"Seriously, it's going down"},{"Date":"12/9/1995","Count":1,"time":"8:00:00","group":1,"value":33,"grpnme":"The End is Coming"},{"Date":"2/24/1996","Count":1,"time":"9:00:00","group":1,"value":34,"grpnme":"The End is Coming"},{"Date":"4/6/1997","Count":2,"time":"10:00:00","group":2,"value":35,"grpnme":"Really, it's happening"},{"Date":"2/17/1998","Count":2,"time":"11:00:00","group":2,"value":36,"grpnme":"Really, it's happening"},{"Date":"12/17/1999","Count":9,"time":"12:00:00","group":4,"value":37,"grpnme":"You better be in your bunker"},{"Date":"11/28/2000","Count":14,"time":"13:00:00","group":4,"value":38,"grpnme":"You better be in your bunker"},{"Date":"3/19/2001","Count":1,"time":"14:00:00","group":1,"value":39,"grpnme":"The End is Coming"},{"Date":"10/12/2002","Count":1,"time":"15:00:00","group":1,"value":40,"grpnme":"The End is Coming"},{"Date":"11/27/2003","Count":2,"time":"16:00:00","group":2,"value":41,"grpnme":"Really, it's happening"},{"Date":"8/27/2006","Count":1,"time":"17:00:00","group":1,"value":42,"grpnme":"The End is Coming"},{"Date":"11/11/2007","Count":1,"time":"18:00:00","group":1,"value":43,"grpnme":"The End is Coming"},{"Date":"6/16/2010","Count":1,"time":"19:00:00","group":1,"value":44,"grpnme":"The End is Coming"},{"Date":"4/6/2011","Count":4,"time":"20:00:00","group":3,"value":45,"grpnme":"Seriously, it's going down"},{"Date":"4/2/2012","Count":3,"time":"21:00:00","group":3,"value":46,"grpnme":"Seriously, it's going down"},{"Date":"12/16/2013","Count":1,"time":"22:00:00","group":1,"value":47,"grpnme":"The End is Coming"},{"Date":"8/1/2014","Count":1,"time":"23:00:00","group":1,"value":48,"grpnme":"The End is Coming"},{"Date":"8/26/2015","Count":1,"time":"0:00:00","group":1,"value":49,"grpnme":"The End is Coming"},{"Date":"12/24/2020","Count":1,"time":"1:00:00","group":1,"value":50,"grpnme":"The End is Coming"},{"Date":"7/15/2021","Count":1,"time":"2:00:00","group":1,"value":51,"grpnme":"The End is Coming"},{"Date":"11/21/2026","Count":1,"time":"3:00:00","group":1,"value":52,"grpnme":"The End is Coming"},{"Date":"2/12/2060","Count":1,"time":"4:00:00","group":1,"value":53,"grpnme":"The End is Coming"},{"Date":"1/26/2120","Count":1,"time":"5:00:00","group":1,"value":54,"grpnme":"The End is Coming"},{"Date":"8/15/2129","Count":1,"time":"6:00:00","group":1,"value":55,"grpnme":"The End is Coming"},{"Date":"11/4/2200","Count":1,"time":"7:00:00","group":1,"value":56,"grpnme":"The End is Coming"},{"Date":"3/4/2239","Count":1,"time":"8:00:00","group":1,"value":57,"grpnme":"The End is Coming"},{"Date":"5/11/2280","Count":1,"time":"9:00:00","group":1,"value":58,"grpnme":"The End is Coming"}]; | |
| var svg = dimple.newSvg("#" + opts.id, opts.width, opts.height); | |
| var myChart = new dimple.chart(svg, data); | |
| if (opts.bounds) { | |
| myChart.setBounds(opts.bounds.x, opts.bounds.y, opts.bounds.width, opts.bounds.height);//myChart.setBounds(80, 30, 480, 330); | |
| } | |
| //dimple allows use of custom CSS with noFormats | |
| if(opts.noFormats) { myChart.noFormats = opts.noFormats; }; | |
| //for markimekko and addAxis also have third parameter measure | |
| //so need to evaluate if measure provided | |
| //function to build axes | |
| function buildAxis(position,layer){ | |
| var axis; | |
| var axisopts; | |
| if (!layer[position+"Axis"]){ | |
| axisopts = opts[position+"Axis"]; | |
| } else axisopts = layer[position+"Axis"]; | |
| if(axisopts.measure) { | |
| axis = myChart[axisopts.type](position,layer[position],axisopts.measure); | |
| } else { | |
| axis = myChart[axisopts.type](position, layer[position]); | |
| }; | |
| if(!(axisopts.type === "addPctAxis")) axis.showPercent = axisopts.showPercent; | |
| if (axisopts.orderRule) axis.addOrderRule(axisopts.orderRule); | |
| if (axisopts.grouporderRule) axis.addGroupOrderRule(axisopts.grouporderRule); | |
| if (axisopts.overrideMin) axis.overrideMin = axisopts.overrideMin; | |
| if (axisopts.overrideMax) axis.overrideMax = axisopts.overrideMax; | |
| if (axisopts.inputFormat) axis.dateParseFormat = axisopts.inputFormat; | |
| if (axisopts.outputFormat) axis.tickFormat = axisopts.outputFormat; | |
| return axis; | |
| }; | |
| var c = null; | |
| if(d3.keys(opts.colorAxis).length > 0) { | |
| c = myChart[opts.colorAxis.type](opts.colorAxis.colorSeries,opts.colorAxis.palette) ; | |
| } | |
| //allow manipulation of default colors to use with dimple | |
| if(opts.defaultColors.length) { | |
| opts.defaultColors = opts.defaultColors[0]; | |
| if (typeof(opts.defaultColors) == "function") { | |
| //assume this is a d3 scale | |
| //for now loop through first 20 but need a better way to handle | |
| defaultColorsArray = []; | |
| for (var n=0;n<20;n++) { | |
| defaultColorsArray.push(opts.defaultColors(n)); | |
| }; | |
| opts.defaultColors = defaultColorsArray; | |
| } | |
| opts.defaultColors.forEach(function(d,i) { | |
| opts.defaultColors[i] = new dimple.color(d); | |
| }) | |
| myChart.defaultColors = opts.defaultColors; | |
| } | |
| //do series | |
| //set up a function since same for each | |
| //as of now we have x,y,groups,data,type in opts for primary layer | |
| //and other layers reside in opts.layers | |
| function buildSeries(layer, hidden){ | |
| //inherit from primary layer if not intentionally changed or xAxis, yAxis, zAxis null | |
| if (!layer.xAxis) layer.xAxis = opts.xAxis; | |
| if (!layer.yAxis) layer.yAxis = opts.yAxis; | |
| if (!layer.zAxis) layer.zAxis = opts.zAxis; | |
| var x = buildAxis("x", layer); | |
| x.hidden = hidden; | |
| var y = buildAxis("y", layer); | |
| y.hidden = hidden; | |
| //z for bubbles | |
| var z = null; | |
| if (!(typeof(layer.zAxis) === 'undefined') && layer.zAxis.type){ | |
| z = buildAxis("z", layer); | |
| }; | |
| //here think I need to evaluate group and if missing do null | |
| //as the group argument | |
| //if provided need to use groups from layer | |
| var s = new dimple.series(myChart, null, x, y, z, c, null, dimple.plot[layer.type], dimple.aggregateMethod.avg, dimple.plot[layer.type].stacked); | |
| //as of v1.1.4 dimple can use different dataset for each series | |
| if(layer.data){ | |
| //convert to an array of objects | |
| //avoid lodash for now | |
| datakeys = d3.keys(layer.data) | |
| layer.dataarray = layer.data[datakeys[1]].map(function(d,i){ | |
| var tempobj = {} | |
| datakeys.forEach(function(key){ | |
| tempobj[key] = layer.data[key][i] | |
| }) | |
| return tempobj | |
| }) | |
| s.data = layer.dataarray; | |
| } | |
| //for measure axis dimple sorts at the series level not at axis level | |
| ['x','y'].map(function(ax){ | |
| if( layer[ax + 'Axis'].type=="addMeasureAxis" && layer[ax + 'Axis'].orderRule ){ | |
| if( typeof layer[ax + 'Axis'].orderRule == "string" ){ | |
| s.addOrderRule( layer[ax + 'Axis'].orderRule ); | |
| } else if ( typeof layer[ax + 'Axis'].orderRule == "object" ) { | |
| s._orderRules = layer[ax + 'Axis'].orderRule; | |
| } | |
| } | |
| }) | |
| if(layer.hasOwnProperty("groups")) { | |
| s.categoryFields = (typeof layer.groups === "object") ? layer.groups : [layer.groups]; | |
| //series offers an aggregate method that we will also need to check if available | |
| //options available are avg, count, max, min, sum | |
| } | |
| if (!(typeof(layer.aggregate) === 'undefined')) { | |
| s.aggregate = eval(layer.aggregate); | |
| } | |
| if (!(typeof(layer.lineWeight) === 'undefined')) { | |
| s.lineWeight = layer.lineWeight; | |
| } | |
| if (!(typeof(layer.lineMarkers) === 'undefined')) { | |
| s.lineMarkers = layer.lineMarkers; | |
| } | |
| if (!(typeof(layer.barGap) === 'undefined')) { | |
| s.barGap = layer.barGap; | |
| } | |
| if (!(typeof(layer.interpolation) === 'undefined')) { | |
| s.interpolation = layer.interpolation; | |
| } | |
| myChart.series.push(s); | |
| /*placeholder fix domain of primary scale for new series data | |
| //not working right now but something like this | |
| //for now just use overrideMin and overrideMax from rCharts | |
| for( var i = 0; i<2; i++) { | |
| if (!myChart.axes[i].overrideMin) { | |
| myChart.series[0]._axisBounds(i==0?"x":"y").min = myChart.series[0]._axisBounds(i==0?"x":"y").min < s._axisBounds(i==0?"x":"y").min ? myChart.series[0]._axisBounds(i==0?"x":"y").min : s._axisBounds(i==0?"x":"y").min; | |
| } | |
| if (!myChart.axes[i].overrideMax) { | |
| myChart.series[0]._axisBounds(i==0?"x":"y")._max = myChart.series[0]._axisBounds(i==0?"x":"y").max > s._axisBounds(i==0?"x":"y").max ? myChart.series[0]._axisBounds(i==0?"x":"y").max : s._axisBounds(i==0?"x":"y").max; | |
| } | |
| myChart.axes[i]._update(); | |
| } | |
| */ | |
| return s; | |
| }; | |
| buildSeries(opts, false); | |
| if (opts.layers.length > 0) { | |
| opts.layers.forEach(function(layer){ | |
| buildSeries(layer, true); | |
| }) | |
| } | |
| //unsure if this is best but if legend is provided (not empty) then evaluate | |
| if(d3.keys(opts.legend).length > 0) { | |
| var l =myChart.addLegend(); | |
| d3.keys(opts.legend).forEach(function(d){ | |
| l[d] = opts.legend[d]; | |
| }); | |
| } | |
| //quick way to get this going but need to make this cleaner | |
| if(opts.storyboard) { | |
| myChart.setStoryboard(opts.storyboard); | |
| }; | |
| myChart.draw(); | |
| </script> | |
| <script></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment