-
+
+
+
What do those ratings mean?
+What do those ratings mean?
- 
-
-
-
-
-
-
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
-
-
+
+ +
+
+ +
+
+
+
+
+
- These ratings follow a random distribution - every person who rates the cats will have different opinions, but some cats are more likely to get a higher rating than others. These factors mean the adoption times will not conform to a normal distribution
-
+
+
+
If we have way more people rate way more cats, the average adoption times will conform to a normal distribution!
+ +
+
+
+
+
- This dude rated 50 cats - check out the results. They are just as random as yours.
These ratings follow a random distribution - every person who rates the cats will have different opinions. Even so, the probability of getting a 10 for each cat is not equal; some cats are more likely to get a higher rating than others. The ratings will not conform to a normal distribution
- +What Happens
+
+
+
diff --git a/index.js b/index.js
index 284556e..2ae530b 100644
--- a/index.js
+++ b/index.js
@@ -1,28 +1,3 @@
-(function() {
- var lastTime = 0;
- var vendors = ['webkit', 'moz'];
- for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
- window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
- window.cancelAnimationFrame =
- window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
- }
-
- if (!window.requestAnimationFrame)
- window.requestAnimationFrame = function(callback, element) {
- var currTime = new Date().getTime();
- var timeToCall = Math.max(0, 16 - (currTime - lastTime));
- var id = window.setTimeout(function() { callback(currTime + timeToCall); },
- timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
-
- if (!window.cancelAnimationFrame)
- window.cancelAnimationFrame = function(id) {
- clearTimeout(id);
- };
-}());
-
$(function() {
Reveal.initialize({
width: 960,
@@ -41,6 +16,13 @@ $(function() {
transition: 'default' // default/cube/page/concave/zoom/linear/fade/none
});
+ function getNumbers(l){
+ var array = [];
+ while(l--){
+ array.push( { x: l, y: Math.floor((Math.random()*5)+1)} );
+ }
+ return(array);
+ }
$('#intro-btn').click(function() {
var currentStep = $(this).data('step');
if(currentStep === 1) {
@@ -54,145 +36,171 @@ $(function() {
$(this).data('step', 1);
}
});
- var data = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }];
-
- // Setup the Dice canvas
- (function() {
- var diceCanvas = document.getElementById('dice-canvas');
- var g = diceCanvas.getContext('2d');
- var graph = [0, 0, 0, 0, 0, 0];
- var diceRolling = false;
- var diceAlpha = 0;
- var diceValue = 0;
-
- var sampleSum = 0;
- var sampleSize = 0;
-
- var BARWIDTH = 45;
- var CANVAS_WIDTH = 274;
- var CANVAS_HEIGHT = 197;
- var DICE_WIDTH = 64;
- var DICE_HEIGHT = 64;
- var DICE_SWITCH_TIME = 2000;
- var DICE_SWITCH_TIME_MAX = 1000;
-
- var updateDiceStat = function() {
- var text = 'Your sample mean is ' + Math.round((sampleSum / sampleSize) * 100) / 100 + ' and your sample size is ' + sampleSize + '.';
- $('#dice-stat').text(text);
- }
- var drawDice = function(num) {
- var centerX = Math.floor( CANVAS_WIDTH / 2 ) - Math.floor( DICE_WIDTH / 2 );
- var centerY = Math.floor( CANVAS_HEIGHT / 2 ) - Math.floor( DICE_HEIGHT / 2 );
- var HOLESIZE = 14;
- var PADDING = 2;
+ if ($('html').hasClass('csstransforms3d')) {
+ // if it's supported, remove the scroll effect add the cool card flipping instead
+ $('.thumb').removeClass('scroll').addClass('flip');
- g.strokeStyle = 'black';
- g.fillStyle = '#fff';
-
- g.fillRect(centerX, centerY, DICE_WIDTH, DICE_HEIGHT);
- g.strokeRect(centerX, centerY, DICE_WIDTH, DICE_HEIGHT);
-
- centerX = centerX + Math.floor(DICE_WIDTH/2) - Math.floor(HOLESIZE/2);
- centerY = centerY + Math.floor(DICE_HEIGHT/2) - Math.floor(HOLESIZE/2);
-
- g.fillStyle = 'rgba(0, 0, 0, ' + diceAlpha + ')'
- if(num === 1) {
- g.fillRect(centerX, centerY, HOLESIZE, HOLESIZE);
- }
- else if(num === 2) {
- g.fillRect(centerX - HOLESIZE - PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
- }
- else if(num === 3) {
- g.fillRect(centerX, centerY, HOLESIZE, HOLESIZE);
- g.fillRect(centerX - HOLESIZE - PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
+ // add/remove flip class that make the transition effect
+ $('#user-graph-next-btn').click(
+ function () {
+ $('.thumb-wrapper').addClass('flipIt');
}
- else if(num === 4) {
- g.fillRect(centerX - HOLESIZE - PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX - HOLESIZE - PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
+ );
- g.fillRect(centerX + HOLESIZE + PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
+ } else {
+ // CSS 3D is not supported, use the scroll up effect instead
+ $('#user-graph-next-btn').click( function () {
+ $('.thumb-detail').stop().animate({bottom:0}, 500);
+ $(this).val("Show me");
+ $(this).off('click').click( function() {
+ Reveal.next();
+ });
+ });
+ }
+ $("#what-happens-btn").click( function(){
+ var graphs = [];
+ $('.generated-graph').addClass('clear-graph').html('');
+ graphs = rollGraphs();
+ $(this).val('with a different 5?').off('click').click(function() {
+ graphs = rollGraphs();
+ $('#middle-bar-text').html("See how random the results are? ");
+ $(this).val('Try one last time').off('click').click(function(){
+ graphs = rollGraphs();
+ $('#middle-bar-text').html("What happens ");
+ $(this).val('if we average the ratings?').off('click').click(function(){
+ $(this).val('if a lot of people rate the cats?').off('click').click(function(){
+ Reveal.next();
+ });
+ $('.generated-graph').removeClass('clear-graph').html('');
+ var l = graphs.length;
+ for (var i = 1; i <= l; i++){
+ var data = graphs[i-1].series[0].data;
+ var sum = 0;
+ for (var j = 0; j < data.length; j++){
+ sum += data[j].y;
+ }
+ $("#generated-graph-" + i).html(sum/data.length);
+ }
+ });
+ });
+ });
+ });
+ function rollGraphs(){
+ var graphs = [];
+ graphs.push(generateSmallGraph(1));
+ graphs.push(generateSmallGraph(2));
+ graphs.push(generateSmallGraph(3));
+ graphs.push(generateSmallGraph(4));
+ return graphs;
+ /*
+ setTimeout(function() { generateSmallGraph(2); }, 200);
+ setTimeout(function() { generateSmallGraph(3); }, 400);
+ setTimeout(function() { generateSmallGraph(4); }, 600);
+ */
+ }
+ $("#five-cats").click( function() { $("#value-plot").html(''); $('#loading-gif').show(); setTimeout(function(){ generateNormalGraph(5)}, 0) });
+ $("#ten-cats").click( function() { $("#value-plot").html(''); $('#loading-gif').show(); setTimeout(function(){ generateNormalGraph(10)}, 0) });
+ $("#fifteen-cats").click( function() { $("#value-plot").html(''); $('#loading-gif').show(); setTimeout(function(){ generateNormalGraph(15)}, 0) });
+ $("#thirty-cats").click( function() { $("#value-plot").html(''); $('#loading-gif').show(); setTimeout(function(){ generateNormalGraph(30)}, 0) });
+ function generateNormalGraph(cats){
+ var averageOccurences = [];
+ for (var i = 0; i < $("#number-of-people").val(); i++){
+ var sum = 0;
+ for (var j = 0; j < cats; j++){
+ sum += Math.floor((Math.random()*5)+1);
}
- else if(num === 5) {
- g.fillRect(centerX, centerY, HOLESIZE, HOLESIZE);
- g.fillRect(centerX - HOLESIZE - PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
-
- g.fillRect(centerX - HOLESIZE - PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
+ sum /= cats;
+ sum = sum.toFixed(5);
+ if (averageOccurences[sum]){
+ averageOccurences[sum] += 1;
}
- else if(num === 6) {
- g.fillRect(centerX - HOLESIZE - PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX - HOLESIZE - PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY - HOLESIZE - PADDING, HOLESIZE, HOLESIZE);
- g.fillRect(centerX + HOLESIZE + PADDING, centerY + HOLESIZE + PADDING, HOLESIZE, HOLESIZE);
-
- g.fillRect(centerX + HOLESIZE + PADDING, centerY, HOLESIZE, HOLESIZE);
- g.fillRect(centerX - HOLESIZE - PADDING, centerY, HOLESIZE, HOLESIZE);
+ else{
+ averageOccurences[sum] = 1;
}
}
-
- var render = function() {
- g.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
- g.fillStyle = 'black';
- // Draw the X-axis graph
- for(var i = 0; i < 6; i++) {
- g.strokeStyle = 'white'
- g.fillRect(i * BARWIDTH, (CANVAS_HEIGHT - graph[i] * 10) - 22, BARWIDTH, graph[i] * 10);
- g.strokeRect(i * BARWIDTH, (CANVAS_HEIGHT - graph[i] * 10) - 22, BARWIDTH, graph[i] * 10);
- g.font = '11px Arial';
- g.strokeStyle = 'black';
- g.strokeText((i + 1).toString(), 22 + i * BARWIDTH, CANVAS_HEIGHT - 11);
- }
-
- if(diceRolling) {
- diceAlpha -= 0.05;
- drawDice(diceValue);
-
- if(diceAlpha < 0) {
- diceRolling = false;
- graph[diceValue-1]++;
- sampleSize++;
- sampleSum += diceValue;
- updateDiceStat();
- }
- }
+ var newarray = []; //HACKISH AS FUCK I HATE THIS CODE
+ for(var key in averageOccurences){
+ newarray.push({'x': parseFloat(key), 'y': averageOccurences[key]});
}
+ var normalGraph = new Rickshaw.Graph( {
+ element: document.querySelector('#value-plot'),
+ renderer: 'bar',
+ series: [
+ {
+ color: "#000",
+ data: newarray.sort(function(a, b){
+ if (a.x < b.x) return -1;
+ if (a.x > b.x) return 1;
+ return 0;
+ })
+ }]
+ });
+ $("#loading-gif").hide();
+ normalGraph.render();
+ }
- var animate = function() {
- requestAnimationFrame(animate);
- render();
- }
+ function swag (a) {
+ return a;
+ }
- $('#roll-dice').click(function() {
- if( diceRolling === false ) {
- diceRolling = true;
- diceAlpha = 1;
- diceValue = Math.floor(Math.random() * 6) + 1;
+
+ function generateSmallGraph(x) {
+ $('#generated-graph-' + x).html('');
+ var generated = new Rickshaw.Graph( {
+ element: document.querySelector("#generated-graph-" + x),
+ renderer: 'bar',
+ series: [
+ {
+ color: "#000",
+ data: getNumbers(50),
+ name: 'Time'
}
+ ]
});
+ generated.render();
+ return generated;
+ }
+ var generatedGraphLarge = new Rickshaw.Graph( {
+ element: document.querySelector('#generated-graph-large'),
+ width: 800,
+ height: 200,
+ renderer: 'bar',
+ series: [
+ {
+ color: '#4b7865',
+ data: getNumbers(50),
+ name: 'Time'
+ }
+ ]
+ });
+ //TODO: implement the fuckin axis marker`
+ /*var generatedGraphLargeYaxis = new Rickshaw.Graph.Axis.Y( {
+ element: document.getElementById('#generated-graph-large-yaxis'),
+ graph: generatedGraphLarge,
+ orientation: 'left',
+ tickFormat: Rickshaw.Fixtures.Number.formatKBMT,
+ });*/
+ generatedGraphLarge.render();
+ $('#roll-dice').click(function() {
- // Start the canvas code
- animate();
- })();
+ });
$('#formula-box').keyup(function() {
var content = $(this).val();
var splitNum = content.split(' ');
- if($.trim(content) === '') {
- content = '0';
- splitNum = content.split(' ');
- }
+
+ console.log(content);
var numberArray = [];
for(var i = 0; i < splitNum.length; i++) {
if( splitNum[i] !== '' ) {
try {
numberArray.push( parseInt(splitNum[i], 10) );
- } catch(err) {}
+
+ }
+ catch(err) {
+ }
}
}
@@ -222,13 +230,31 @@ $(function() {
$('.panel-two').hide(); // Hide this at the start
$('.rate-button').click(function() {
var rating = $(this).val();
- catGameArray.push(rating);
+ catGameArray.push({ x: catGameCounter - 1, y: parseFloat(rating) });
catGameCounter++;
- $('.cat-image-container img').attr('src', './cats/cat' + catGameCounter + '.jpg');
- $('.cat-image-container img').hide().fadeIn();
if(catGameArray.length === 5) {
Reveal.next();
+ var userDataGraph = new Rickshaw.Graph( {
+ element: document.querySelector('#user-ratings-graph'),
+ renderer: 'bar',
+ series: [
+ {
+ color: "#9c646b",
+ data: catGameArray,
+ name: 'Time'
+ }
+ ]
+ } );
+ var hoverDetail = new Rickshaw.Graph.HoverDetail( {
+ graph: userDataGraph,
+ xFormatter: function(x) { return null },
+ yFormatter: function(y) { return Math.floor(y) + " months" }
+ } );
+ userDataGraph.render();
+ return;
}
+ $('.cat-image-container img').attr('src', './cats/cat' + catGameCounter + '.jpg');
+ $('.cat-image-container img').hide().fadeIn();
});
});
diff --git a/loadingspinner.gif b/loadingspinner.gif
new file mode 100644
index 0000000..031c908
Binary files /dev/null and b/loadingspinner.gif differ
?
+ ?
+ ?
+ ?
+
+
+
+
+
+ Plot the average for people rating:
+
+ Number of Times An Average Occurs
+ ?
+
+ 0Average Time Until Adoption5