This is a histogram retrieved from the predicted apocalyptic events on wikipedia with a bit of humor added on.
Built with blockbuilder.org
This is a histogram retrieved from the predicted apocalyptic events on wikipedia with a bit of humor added on.
Built with blockbuilder.org
<!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> |