From aa01b942bb8e19a94fc676e325a56dddad24228d Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 23 Feb 2013 02:02:18 -0500 Subject: [PATCH 01/12] comment out image styling from default.css --- default.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/default.css b/default.css index 7a0ba2a..cbb391b 100644 --- a/default.css +++ b/default.css @@ -90,10 +90,10 @@ body { * IMAGES *********************************************/ .reveal section img { - margin: 15px 0px; + /*margin: 15px 0px; background: rgba(255, 255, 255, 0.12); border: 4px solid #eeeeee; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/ -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; @@ -102,9 +102,9 @@ body { } .reveal a:hover img { - background: rgba(255, 255, 255, 0.2); + /*background: rgba(255, 255, 255, 0.2); border-color: #13daec; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);*/ } /********************************************* From 95384a4c97555ed97411f3ac616699437879fce0 Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 23 Feb 2013 02:20:32 -0500 Subject: [PATCH 02/12] internet died, so I'm calling it a night --- Rickshaw.Graph.HoverDetail.js | 213 ++++++++++++++++++++++++++++++++++ index.css | 18 +++ index.html | 13 +-- index.js | 16 ++- 4 files changed, 247 insertions(+), 13 deletions(-) create mode 100644 Rickshaw.Graph.HoverDetail.js diff --git a/Rickshaw.Graph.HoverDetail.js b/Rickshaw.Graph.HoverDetail.js new file mode 100644 index 0000000..4f3d83f --- /dev/null +++ b/Rickshaw.Graph.HoverDetail.js @@ -0,0 +1,213 @@ +Rickshaw.namespace('Rickshaw.Graph.HoverDetail'); + +Rickshaw.Graph.HoverDetail = Rickshaw.Class.create({ + + initialize: function(args) { + + var graph = this.graph = args.graph; + + this.xFormatter = args.xFormatter || function(x) { + return new Date( x * 1000 ).toUTCString(); + }; + + this.yFormatter = args.yFormatter || function(y) { + return y === null ? y : y.toFixed(2); + }; + + var element = this.element = document.createElement('div'); + element.className = 'detail'; + + this.visible = true; + graph.element.appendChild(element); + + this.lastEvent = null; + this._addListeners(); + + this.onShow = args.onShow; + this.onHide = args.onHide; + this.onRender = args.onRender; + + this.formatter = args.formatter || this.formatter; + + }, + + formatter: function(series, x, y, formattedX, formattedY, d) { + return series.name + ': ' + formattedY; + }, + + update: function(e) { + + e = e || this.lastEvent; + if (!e) return; + this.lastEvent = e; + + if (!e.target.nodeName.match(/^(path|svg|rect)$/)) return; + + var graph = this.graph; + + var eventX = e.offsetX || e.layerX; + var eventY = e.offsetY || e.layerY; + + var j = 0; + var points = []; + var nearestPoint; + + this.graph.series.active().forEach( function(series) { + + var data = this.graph.stackedData[j++]; + + var domainX = graph.x.invert(eventX); + + var domainIndexScale = d3.scale.linear() + .domain([data[0].x, data.slice(-1)[0].x]) + .range([0, data.length]); + + var approximateIndex = Math.floor(domainIndexScale(domainX)); + var dataIndex = Math.min(approximateIndex || 0, data.length - 1); + + for (var i = approximateIndex; i < data.length - 1;) { + + if (!data[i] || !data[i + 1]) break; + if (data[i].x <= domainX && data[i + 1].x > domainX) { dataIndex = i; break } + + if (data[i + 1].x <= domainX) { i++ } else { i-- } + } + + var value = data[dataIndex]; + + var distance = Math.sqrt( + Math.pow(Math.abs(graph.x(value.x) - eventX), 2) + + Math.pow(Math.abs(graph.y(value.y + value.y0) - eventY), 2) + ); + + var xFormatter = series.xFormatter || this.xFormatter; + var yFormatter = series.yFormatter || this.yFormatter; + + var point = { + formattedXValue: xFormatter(value.x), + formattedYValue: yFormatter(value.y), + series: series, + value: value, + distance: distance, + order: j, + name: series.name + }; + + if (!nearestPoint || distance < nearestPoint.distance) { + nearestPoint = point; + } + + points.push(point); + + }, this ); + + + nearestPoint.active = true; + + var domainX = nearestPoint.value.x; + var formattedXValue = nearestPoint.formattedXValue; + + this.element.innerHTML = ''; + this.element.style.left = graph.x(domainX) + 'px'; + + this.visible && this.render( { + points: points, + detail: points, // for backwards compatibility + mouseX: eventX, + mouseY: eventY, + formattedXValue: formattedXValue, + domainX: domainX + } ); + }, + + hide: function() { + this.visible = false; + this.element.classList.add('inactive'); + + if (typeof this.onHide == 'function') { + this.onHide(); + } + }, + + show: function() { + this.visible = true; + this.element.classList.remove('inactive'); + + if (typeof this.onShow == 'function') { + this.onShow(); + } + }, + + render: function(args) { + + var graph = this.graph; + var points = args.points; + var point = points.filter( function(p) { return p.active } ).shift(); + + if (point.value.y === null) return; + + var formattedXValue = this.xFormatter(point.value.x); + var formattedYValue = this.yFormatter(point.value.y); + + this.element.innerHTML = ''; + this.element.style.left = graph.x(point.value.x) + 'px'; + + var xLabel = document.createElement('div'); + + xLabel.className = 'x_label'; + xLabel.innerHTML = formattedXValue; + this.element.appendChild(xLabel); + + var item = document.createElement('div'); + + item.className = 'item'; + item.innerHTML = this.formatter(point.series, point.value.x, point.value.y, formattedXValue, formattedYValue, point); + item.style.top = this.graph.y(point.value.y0 + point.value.y) + 'px'; + + this.element.appendChild(item); + + var dot = document.createElement('div'); + + dot.className = 'dot'; + dot.style.top = item.style.top; + dot.style.borderColor = point.series.color; + + this.element.appendChild(dot); + + if (point.active) { + item.className = 'item active'; + dot.className = 'dot active'; + } + + this.show(); + + if (typeof this.onRender == 'function') { + this.onRender(args); + } + }, + + _addListeners: function() { + + this.graph.element.addEventListener( + 'mousemove', + function(e) { + this.visible = true; + this.update(e) + }.bind(this), + false + ); + + this.graph.onUpdate( function() { this.update() }.bind(this) ); + + this.graph.element.addEventListener( + 'mouseout', + function(e) { + if (e.relatedTarget && !(e.relatedTarget.compareDocumentPosition(this.graph.element) & Node.DOCUMENT_POSITION_CONTAINS)) { + this.hide(); + } + }.bind(this), + false + ); + } +}); + diff --git a/index.css b/index.css index 0174cba..3cdd717 100644 --- a/index.css +++ b/index.css @@ -41,3 +41,21 @@ margin: 0 auto; text-align:center; } + +.graph-pictures-xaxis { + width: 100%; +} +.graph-pictures-xaxis div { + width: 19.8%; + float:left; + margin: 0; + padding: 0; + display: inline-block; +} +.graph-pictures-xaxis img { + border: 3px solid #333; +} + +.detail { + background:black; +} diff --git a/index.html b/index.html index c2c1d3a..9c84780 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -43,17 +44,13 @@

What do those ratings mean?

-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/index.js b/index.js index ddcfb87..a4cd6fe 100644 --- a/index.js +++ b/index.js @@ -30,19 +30,25 @@ $(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 }]; + var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; - var graph = new Rickshaw.Graph( { + var userDataGraph = new Rickshaw.Graph( { element: document.querySelector('#user-ratings-graph'), renderer: 'bar', series: [ { - color: 'steelblue', - data: data + color: "#9c646b", + data: userData } ] } ); - graph.render(); + var hoverDetail = new Rickshaw.Graph.HoverDetail( { + graph: userDataGraph, + xFormatter: function(x) { return "Cat " + (x+1) }, + yFormatter: function(y) { return y + "/10 cuteness" } + } ); + + userDataGraph.render(); }); From e78612771f96c1201166544da7702b636554731f Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 23 Feb 2013 17:31:37 -0500 Subject: [PATCH 03/12] add card flip css/js, with graceful degradation using jquery animate --- detail.css | 73 ++++++++++++++++++++++++++++++++++++ index.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++----- index.html | 21 +++++++++-- index.js | 38 +++++++++++++++++-- 4 files changed, 222 insertions(+), 17 deletions(-) create mode 100644 detail.css diff --git a/detail.css b/detail.css new file mode 100644 index 0000000..722451b --- /dev/null +++ b/detail.css @@ -0,0 +1,73 @@ +.rickshaw_graph .detail { + pointer-events: none; + position: absolute; + top: 0; + z-index: 2; + background: rgba(0, 0, 0, 0.1); + bottom: 0; + width: 1px; + transition: opacity 0.25s linear; + -moz-transition: opacity 0.25s linear; + -o-transition: opacity 0.25s linear; + -webkit-transition: opacity 0.25s linear; +} +.rickshaw_graph .detail.inactive { + opacity: 0; +} +.rickshaw_graph .detail .item.active { + opacity: 1; +} +.rickshaw_graph .detail .x_label { + font-family: Arial, sans-serif; + border-radius: 3px; + padding: 6px; + opacity: 0.5; + border: 1px solid #e0e0e0; + font-size: 12px; + position: absolute; + background: white; + white-space: nowrap; +} +.rickshaw_graph .detail .item { + position: absolute; + z-index: 2; + border-radius: 3px; + padding: 0.25em; + font-size: 12px; + font-family: Arial, sans-serif; + opacity: 0; + background: rgba(0, 0, 0, 0.4); + color: white; + border: 1px solid rgba(0, 0, 0, 0.4); + margin-left: 1em; + margin-top: -1em; + white-space: nowrap; +} +.rickshaw_graph .detail .item.active { + opacity: 1; + background: rgba(0, 0, 0, 0.8); +} +.rickshaw_graph .detail .item:before { + content: "\25c2"; + position: absolute; + left: -0.5em; + color: rgba(0, 0, 0, 0.7); + width: 0; +} +.rickshaw_graph .detail .dot { + width: 4px; + height: 4px; + margin-left: -4px; + margin-top: -3px; + border-radius: 5px; + position: absolute; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + background: white; + border-width: 2px; + border-style: solid; + display: none; + background-clip: padding-box; +} +.rickshaw_graph .detail .dot.active { + display: block; +} diff --git a/index.css b/index.css index 3cdd717..fa1d937 100644 --- a/index.css +++ b/index.css @@ -22,22 +22,30 @@ font-size: 0.6em !important; } -#intro-btn { - background-color: #9C646B; +.dark { + color: #222; +} + +.btn { + box-shadow: 1px 1px 5px black; border: 0; border-radius: 4px; color: #fff; - font-size: 1.5em; padding: 12px; } +#intro-btn { + background-color: #9C646B; + font-size: 1.5em; +} + #intro-btn:hover { background-color: #a66c74; cursor: pointer; } .graph-wrapper { - width: 70%; + width: 550px; margin: 0 auto; text-align:center; } @@ -46,16 +54,95 @@ width: 100%; } .graph-pictures-xaxis div { - width: 19.8%; + width: 104.5px; + margin-right: 5.5px; + margin-top: -7px; float:left; - margin: 0; - padding: 0; + background-color: rgba(0,0,0,0.7); + padding-top:6px; display: inline-block; } .graph-pictures-xaxis img { - border: 3px solid #333; + outline: 2px solid #000; +} + +.detail { /*styles the on-hover stuff*/ + width: 104.5px; + text-align:center; + padding: 0; + font-size: 0.5em; + position: fixed; + top: 325px; + margin-left: 205px +} + +/*card flip attempt:*/ +.thumb { + display:block; + width:880px; + height:100px; + position:relative; + margin-top: 10px; + margin-bottom:10px; + float:left; +} + +.thumb-wrapper { + display:block; + width:100%; + height:100%; +} + +.thumb .thumb-front { + width:100%; + height:100%; + position:absolute; + display:block; +} + +.thumb .thumb-detail { + display:block; + width:100%; + height:100%; + position:absolute; + background-color: #D1C181; + outline 3px solid black; +} + +.thumb.scroll { + overflow: hidden; +} + +.thumb.scroll .thumb-detail { + bottom: -280px; +} + +.thumb.flip { + perspective:800px; +} + +.thumb.flip .thumb-wrapper { + transition: transform 1s; + transform-style: preserve-3d; } -.detail { - background:black; +.thumb.flip .thumb-detail { + transform: rotateY(-180deg); +} + +.thumb.flip .thumb-front, .thumb.flip .thumb-detail { + backface-visibility: hidden; +} + +.thumb.flip .flipIt { + transform: rotateY(-180deg); +} + +#user-graph-next-btn { + background-color: #4B7865; + font-size: .7em; +} +#user-graph-next-btn:hover { + background-color: #9CB06C; + cursor: pointer; } diff --git a/index.html b/index.html index 9c84780..4a7e29c 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,12 @@ Central Limit Theorem + + @@ -28,7 +30,7 @@

DEFINITION


- +
@@ -38,7 +40,7 @@

DEFINITION

-

What do those ratings mean?

+
What do those ratings mean?
@@ -55,8 +57,19 @@

What do those ratings mean?

-

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

- +
+
+
+
+

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

+
+
+

Some other shit goes here

+
+
+
+
+
diff --git a/index.js b/index.js index a4cd6fe..a459dc1 100644 --- a/index.js +++ b/index.js @@ -30,6 +30,37 @@ $(function() { $(this).data('step', 1); } }); + + if ($('html').hasClass('csstransforms3d')) { + // if it's supported, remove the scroll effect add the cool card flipping instead + $('.thumb').removeClass('scroll').addClass('flip'); + + // add/remove flip class that make the transition effect + $('#user-graph-next-btn').click( + function () { + console.log('hit'); + $('.thumb-wrapper').addClass('flipIt'); + }/*, + function () { + $('.thumb-wrapper').removeClass('flipIt'); + }*/ + ); + + } 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).click( function() { + //TODO: make next slide here + }); + }/*, + function () { + $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic'); + }*/ + ); + } + var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; var userDataGraph = new Rickshaw.Graph( { @@ -38,15 +69,16 @@ $(function() { series: [ { color: "#9c646b", - data: userData + data: userData, + name: 'Cuteness' } ] } ); var hoverDetail = new Rickshaw.Graph.HoverDetail( { graph: userDataGraph, - xFormatter: function(x) { return "Cat " + (x+1) }, - yFormatter: function(y) { return y + "/10 cuteness" } + xFormatter: function(x) { return null }, + yFormatter: function(y) { return Math.floor(y) } } ); userDataGraph.render(); From 7cad1f2a5193bb64878aeffe12d1a2b392a093f2 Mon Sep 17 00:00:00 2001 From: nmost Date: Tue, 26 Feb 2013 21:35:17 -0500 Subject: [PATCH 04/12] fix some issues rickshaw, add button functionality, add more-graphs page --- Rickshaw.Graph.HoverDetail.js | 2 +- index.html | 21 +++++++++++++++++++-- index.js | 17 ++++++----------- 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/Rickshaw.Graph.HoverDetail.js b/Rickshaw.Graph.HoverDetail.js index 4f3d83f..30b9678 100644 --- a/Rickshaw.Graph.HoverDetail.js +++ b/Rickshaw.Graph.HoverDetail.js @@ -32,7 +32,7 @@ Rickshaw.Graph.HoverDetail = Rickshaw.Class.create({ }, formatter: function(series, x, y, formattedX, formattedY, d) { - return series.name + ': ' + formattedY; + return /*series.name + ': ' + */formattedY; }, update: function(e) { diff --git a/index.html b/index.html index 4a7e29c..c6d866f 100644 --- a/index.html +++ b/index.html @@ -61,10 +61,10 @@
What do those ratings mean?
-

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

+

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

-

Some other shit goes here

+

If we have way more people rate way more cats, the average cuteness will conform to a normal distribution!

@@ -72,6 +72,23 @@
What do those ratings mean?
+
+
+
+
+
+ +
+
+
+
What Happens
+
+
+
+
+
+
+
diff --git a/index.js b/index.js index a459dc1..4579f77 100644 --- a/index.js +++ b/index.js @@ -40,10 +40,7 @@ $(function() { function () { console.log('hit'); $('.thumb-wrapper').addClass('flipIt'); - }/*, - function () { - $('.thumb-wrapper').removeClass('flipIt'); - }*/ + } ); } else { @@ -51,13 +48,11 @@ $(function() { $('#user-graph-next-btn').click( function () { $('.thumb-detail').stop().animate({bottom:0}, 500); + $(this).val("Show me"); $(this).click( function() { - //TODO: make next slide here + Reveal.next(); }); - }/*, - function () { - $(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic'); - }*/ + } ); } @@ -70,7 +65,7 @@ $(function() { { color: "#9c646b", data: userData, - name: 'Cuteness' + name: 'Time' } ] } ); @@ -78,7 +73,7 @@ $(function() { var hoverDetail = new Rickshaw.Graph.HoverDetail( { graph: userDataGraph, xFormatter: function(x) { return null }, - yFormatter: function(y) { return Math.floor(y) } + yFormatter: function(y) { return Math.floor(y) + " months" } } ); userDataGraph.render(); From f9bd81d326af9c5bb0bdc573ec59c501f2550d85 Mon Sep 17 00:00:00 2001 From: nmost Date: Sun, 3 Mar 2013 19:48:45 -0500 Subject: [PATCH 05/12] layout of slide finished --- index.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 23 +++++++++++------------ index.js | 33 ++++++++++++++++++++++++++++----- 3 files changed, 84 insertions(+), 17 deletions(-) diff --git a/index.css b/index.css index fa1d937..1b47456 100644 --- a/index.css +++ b/index.css @@ -146,3 +146,48 @@ background-color: #9CB06C; cursor: pointer; } + +#generated-graph-large { + display: inline-block; + /*background:white; + border-left:6px solid white; + border-right: 6px solid white; + border-top: 3px solid white;*/ +} +#generated-graph-large-yaxis { + position:absolute; + top: 0; + bottom: 0; + width: 50px; +} +#generated-graph-label { + position: relative; + top: -15px; + font-size: .6em; +} +#middle-bar{ + margin-top:30px; + font-size: .8em; + width: 100% +} +#what-happens-btn { + font-size: .8em; + background-color: #4b7865; +} +#what-happens-btn:hover{ + background-color: #9CB06C; + cursor: pointer; +} + +#bottom-graphs-wrapper { + margin-top: 50px; +} +.generated-graph { + display: inline-block; + width: 200px; + height: 150px; + background:black; + line-height:150px; + font-size: 100px; + color: white; +} diff --git a/index.html b/index.html index c6d866f..de80a8c 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,7 @@
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 cuteness will 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!

@@ -74,19 +74,18 @@
What do those ratings mean?
-
+
+
-
- -
+
This dude rated 50 cats - check out the results. They are just as random as yours.
-
-
What Happens
-
-
-
-
-
+
What Happens
+
+
?
+
?
+
?
+
?
+
diff --git a/index.js b/index.js index 4579f77..ca82202 100644 --- a/index.js +++ b/index.js @@ -16,9 +16,15 @@ $(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'); - console.log(currentStep); if(currentStep === 1) { Reveal.next(); } else { @@ -38,7 +44,6 @@ $(function() { // add/remove flip class that make the transition effect $('#user-graph-next-btn').click( function () { - console.log('hit'); $('.thumb-wrapper').addClass('flipIt'); } ); @@ -57,7 +62,6 @@ $(function() { } var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; - var userDataGraph = new Rickshaw.Graph( { element: document.querySelector('#user-ratings-graph'), renderer: 'bar', @@ -69,13 +73,32 @@ $(function() { } ] } ); - var hoverDetail = new Rickshaw.Graph.HoverDetail( { graph: userDataGraph, xFormatter: function(x) { return null }, yFormatter: function(y) { return Math.floor(y) + " months" } } ); - userDataGraph.render(); + 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(); }); From a209e1911c109e8d517dd1afc03ff8ff37c0ad94 Mon Sep 17 00:00:00 2001 From: nmost Date: Sun, 3 Mar 2013 21:34:37 -0500 Subject: [PATCH 06/12] content of slide 4 finished --- index.css | 14 +++++++---- index.html | 2 +- index.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 73 insertions(+), 14 deletions(-) diff --git a/index.css b/index.css index 1b47456..ad2f94b 100644 --- a/index.css +++ b/index.css @@ -184,10 +184,14 @@ } .generated-graph { display: inline-block; - width: 200px; - height: 150px; - background:black; - line-height:150px; - font-size: 100px; + width: 210px; + height: 120px; + background: rgba(0,0,0,0.8); + line-height:120px; + font-size: 50px; color: white; } + +.clear-graph { + background: none; +} diff --git a/index.html b/index.html index de80a8c..88c441d 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@
What do those ratings mean?
This dude rated 50 cats - check out the results. They are just as random as yours.
-
What Happens
+
What Happens
?
?
diff --git a/index.js b/index.js index ca82202..e8c95f1 100644 --- a/index.js +++ b/index.js @@ -50,15 +50,54 @@ $(function() { } 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).click( function() { - Reveal.next(); + $('#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 we take a LOT of averages?').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); + */ } var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; @@ -80,6 +119,22 @@ $(function() { } ); userDataGraph.render(); + 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, From d07388a0d80b2a7a2060b2d908bfd08ae2e615df Mon Sep 17 00:00:00 2001 From: nmost Date: Wed, 6 Mar 2013 17:28:59 -0500 Subject: [PATCH 07/12] laptop is gonna die : ( --- index.css | 10 +++++++++- index.html | 10 +++++++++- index.js | 37 ++++++++++++++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index ad2f94b..ee68d06 100644 --- a/index.css +++ b/index.css @@ -172,7 +172,6 @@ } #what-happens-btn { font-size: .8em; - background-color: #4b7865; } #what-happens-btn:hover{ background-color: #9CB06C; @@ -195,3 +194,12 @@ .clear-graph { background: none; } + +#final-graph-header { + font-size: .7em; +} + +#final-graph-header input { + font-size: .7em; + margin: 8px; +} diff --git a/index.html b/index.html index 88c441d..c672219 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@
What do those ratings mean?
This dude rated 50 cats - check out the results. They are just as random as yours.
-
What Happens
+
What Happens
?
?
@@ -88,6 +88,14 @@
What do those ratings mean?
+
+
+
+ Plot the average for 1000 people rating: +
+
+
+
diff --git a/index.js b/index.js index e8c95f1..dd18b7f 100644 --- a/index.js +++ b/index.js @@ -69,7 +69,7 @@ $(function() { graphs = rollGraphs(); $('#middle-bar-text').html("What happens "); $(this).val('if we average the ratings?').off('click').click(function(){ - $(this).val('if we take a LOT of averages?').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(''); @@ -99,6 +99,41 @@ $(function() { setTimeout(function() { generateSmallGraph(4); }, 600); */ } + $("#five-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(5) }); + $("#thirty-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(30) }); + function generateNormalGraph(x){ + var array = []; + for (var i = 0; i < 1000; i++){ + var sum = 0; + for (var j = 0; j < x; j++){ + sum += Math.floor((Math.random()*5)+1); + } + sum /= x; + if (array[sum]){ + array[sum] += 1; + } + else{ + array[sum] = 1; + } + } + var newarray = []; //HACKISH AS FUCK I HATE THIS CODE + for(var key in array){ + newarray.push({'x': parseFloat(parseFloat(key).toFixed(4)), 'y': array[key]}); + } + console.log(newarray); + var normalGraph = new Rickshaw.Graph( { + element: document.querySelector('#value-plot'), + height: 300, + width: 600, + renderer: 'bar', + series: [ + { + color: "#000", + data: newarray, + }] + }); + normalGraph.render(); + } var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; var userDataGraph = new Rickshaw.Graph( { From fa4cc5f75aad716402af9aa9407d42054e20b9fd Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 9 Mar 2013 14:49:11 -0500 Subject: [PATCH 08/12] pre-merge --- index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index dd18b7f..2417cee 100644 --- a/index.js +++ b/index.js @@ -123,13 +123,12 @@ $(function() { console.log(newarray); var normalGraph = new Rickshaw.Graph( { element: document.querySelector('#value-plot'), - height: 300, - width: 600, renderer: 'bar', series: [ { color: "#000", - data: newarray, + //data: [ {x: 3, y: 65}, {x: 5, y: 9} ] + data: newarray }] }); normalGraph.render(); From 3ccda8e5c3e4d68b1a0a35a7b89dfa41aa2ec740 Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 9 Mar 2013 17:34:12 -0500 Subject: [PATCH 09/12] lol forgot to commit... massive change, tons of bugs fixed. stuff ackshully works now --- index.css | 30 +++++++++++++++++++++ index.html | 8 +++--- index.js | 76 ++++++++++++++++++++++++++++++------------------------ 3 files changed, 76 insertions(+), 38 deletions(-) diff --git a/index.css b/index.css index ee68d06..254d951 100644 --- a/index.css +++ b/index.css @@ -165,14 +165,17 @@ top: -15px; font-size: .6em; } + #middle-bar{ margin-top:30px; font-size: .8em; width: 100% } + #what-happens-btn { font-size: .8em; } + #what-happens-btn:hover{ background-color: #9CB06C; cursor: pointer; @@ -199,7 +202,34 @@ font-size: .7em; } +#final-graph-header .btn { + margin: 4px; +} + #final-graph-header input { font-size: .7em; margin: 8px; } + +#value-plot { + background: white; + height: 450px; + width: 800px; + margin: 20px auto 0 auto ; +} + +#people-select-wrapper { + display: inline-block; +} + +#people-select-wrapper select { + display: inline-block; + padding: 3px; + font-size: .8em; + width: 120px; + outline: none; + color: black; + border: none; + border-radius: 5px; + background-color: #fff; +} diff --git a/index.html b/index.html index 33608ea..9d50279 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,7 @@
What do those ratings mean?
- +
@@ -142,7 +142,7 @@
What do those ratings mean?
This dude rated 50 cats - check out the results. They are just as random as yours.
-
What Happens
+
What Happens
?
?
@@ -154,11 +154,9 @@
What do those ratings mean?
- Plot the average for 1000 people rating: + Plot the average for
people rating:
-

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

-
diff --git a/index.js b/index.js index 667681f..e8d7648 100644 --- a/index.js +++ b/index.js @@ -100,25 +100,28 @@ $(function() { */ } $("#five-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(5) }); + $("#ten-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(10) }); + $("#fifteen-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(15) }); $("#thirty-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(30) }); - function generateNormalGraph(x){ - var array = []; - for (var i = 0; i < 1000; i++){ + function generateNormalGraph(cats){ + var averageOccurences = []; + for (var i = 0; i < $("#number-of-people").val(); i++){ var sum = 0; - for (var j = 0; j < x; j++){ + for (var j = 0; j < cats; j++){ sum += Math.floor((Math.random()*5)+1); } - sum /= x; - if (array[sum]){ - array[sum] += 1; + sum /= cats; + sum = sum.toFixed(5); + if (averageOccurences[sum]){ + averageOccurences[sum] += 1; } else{ - array[sum] = 1; + averageOccurences[sum] = 1; } } var newarray = []; //HACKISH AS FUCK I HATE THIS CODE - for(var key in array){ - newarray.push({'x': parseFloat(parseFloat(key).toFixed(4)), 'y': array[key]}); + for(var key in averageOccurences){ + newarray.push({'x': parseFloat(key), 'y': averageOccurences[key]}); } console.log(newarray); var normalGraph = new Rickshaw.Graph( { @@ -127,31 +130,20 @@ $(function() { series: [ { color: "#000", - //data: [ {x: 3, y: 65}, {x: 5, y: 9} ] - data: newarray + data: newarray.sort(function(a, b){ + if (a.x < b.x) return -1; + if (a.x > b.x) return 1; + return 0; + }) }] }); normalGraph.render(); } - var userData = [ { x: 0, y: 3 },{ x: 1, y: 9 },{ x: 2, y: 7 },{ x: 3, y: 1 },{ x: 4, y: 6 }]; - var userDataGraph = new Rickshaw.Graph( { - element: document.querySelector('#user-ratings-graph'), - renderer: 'bar', - series: [ - { - color: "#9c646b", - data: userData, - 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(); + function swag (a) { + return a; + } + function generateSmallGraph(x) { $('#generated-graph-' + x).html(''); @@ -238,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(); }); }); From 7ae81172b8bf61ab3cd2cbbd60a0ed94155fda99 Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 9 Mar 2013 17:37:37 -0500 Subject: [PATCH 10/12] change cats from placekitten to live kitties! --- index.css | 1 + index.html | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 254d951..561f341 100644 --- a/index.css +++ b/index.css @@ -64,6 +64,7 @@ } .graph-pictures-xaxis img { outline: 2px solid #000; + height: 55px; } .detail { /*styles the on-hover stuff*/ diff --git a/index.html b/index.html index 9d50279..eb81714 100644 --- a/index.html +++ b/index.html @@ -110,13 +110,13 @@
What do those ratings mean?
- +
- +
- +
- +
From 62e70285369bb50fb172da5fd19acdf55aefb966 Mon Sep 17 00:00:00 2001 From: nmost Date: Sat, 9 Mar 2013 18:14:11 -0500 Subject: [PATCH 11/12] shit works yo --- index.css | 33 ++++++++++++++++++++++++++++++++- index.html | 7 +++++-- index.js | 10 +++++----- loadingspinner.gif | Bin 0 -> 6494 bytes 4 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 loadingspinner.gif diff --git a/index.css b/index.css index 561f341..22697a3 100644 --- a/index.css +++ b/index.css @@ -200,6 +200,7 @@ } #final-graph-header { + height: 55px; font-size: .7em; } @@ -212,11 +213,41 @@ margin: 8px; } +#value-plot-y { + width: 450px; + position: absolute; + left:-160px; + top: 320px; + font-size: .5em; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); +} #value-plot { background: white; height: 450px; width: 800px; - margin: 20px auto 0 auto ; + margin: 0 auto; + font-size: 400px; + line-height: 450px; + color:black; +} +#loading-gif { + position: absolute; + top: 300px; + left: 450px; + display:none; +} +#value-plot-x { + width:800px; + text-align:center; + margin: 0 auto; + font-size: .6em; +} +.left { + float: left; +} +.right { + float: right; } #people-select-wrapper { diff --git a/index.html b/index.html index eb81714..14c1144 100644 --- a/index.html +++ b/index.html @@ -154,9 +154,12 @@
What do those ratings mean?
- Plot the average for
people rating: + Plot the average for
people rating:
-
+
Number of Times An Average Occurs
+
?
+ +
0Average Time Until Adoption5
diff --git a/index.js b/index.js index e8d7648..2ae530b 100644 --- a/index.js +++ b/index.js @@ -99,10 +99,10 @@ $(function() { setTimeout(function() { generateSmallGraph(4); }, 600); */ } - $("#five-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(5) }); - $("#ten-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(10) }); - $("#fifteen-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(15) }); - $("#thirty-cats").click( function() { $("#value-plot").html(''); generateNormalGraph(30) }); + $("#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++){ @@ -123,7 +123,6 @@ $(function() { for(var key in averageOccurences){ newarray.push({'x': parseFloat(key), 'y': averageOccurences[key]}); } - console.log(newarray); var normalGraph = new Rickshaw.Graph( { element: document.querySelector('#value-plot'), renderer: 'bar', @@ -137,6 +136,7 @@ $(function() { }) }] }); + $("#loading-gif").hide(); normalGraph.render(); } diff --git a/loadingspinner.gif b/loadingspinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..031c9082e387d2155ad098f13061c5b0524c1bd3 GIT binary patch literal 6494 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 I>+#p|Kd Date: Sat, 9 Mar 2013 18:24:36 -0500 Subject: [PATCH 12/12] i rly hope this works --- index.js | 280 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 141 insertions(+), 139 deletions(-) diff --git a/index.js b/index.js index d0c392f..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, @@ -62,143 +37,170 @@ $(function() { } }); - // 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; - - g.strokeStyle = 'black'; - g.fillStyle = '#fff'; - - g.fillRect(centerX, centerY, DICE_WIDTH, DICE_HEIGHT); - g.strokeRect(centerX, centerY, DICE_WIDTH, DICE_HEIGHT); + if ($('html').hasClass('csstransforms3d')) { + // if it's supported, remove the scroll effect add the cool card flipping instead + $('.thumb').removeClass('scroll').addClass('flip'); - 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(); + } + + function swag (a) { + return a; + } - var animate = function() { - requestAnimationFrame(animate); - render(); - } - $('#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) { + } } }