From: W. Trevor King <wking@tremily.us>
Date: Fri, 17 Jan 2014 20:25:14 +0000 (-0800)
Subject: index.html: Use Chart.js to plot shell-vs-hand
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=f4ce100d81882543a00f579485af2c706358dd95;p=reveal.js.git

index.html: Use Chart.js to plot shell-vs-hand

Define a PieChart helper that hides the context extraction and
overrides the Chart.js animation default.  Why are folks so attached
to animation? :p

Give this slide a fixed height, to ensure that the title and pie
charts align with later slides.

I'm guessing on the data here.  Ideally, we'd use "number of hand
responses" and "number of shell responses", and the whole chart would
be a link to the survey where the data was collected.
---

diff --git a/index.html b/index.html
index 971c5d5..7533e36 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,18 @@
 			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
 		</script>
 
+		<script src="js/Chart.min.js"></script>
+
+		<script type="text/javascript">
+			function PieChart(id, data) {
+				var canvas = document.getElementById(id);
+				var ctx = canvas.getContext("2d");
+				var PieChart = new Chart(ctx).Pie(
+					data=data,
+					options={"animation": false});
+			}
+		</script>
+
 		<!--[if lt IE 9]>
 		<script src="lib/js/html5shiv.js"></script>
 		<![endif]-->
@@ -273,6 +285,30 @@
 					</section>
 				</section> <!-- us vs. them -->
 
+				<section> <!-- surely you're exaggerating -->
+					<section style="height: 500px">
+						<h3>Surely You're Exaggerating</h3>
+
+						<ol>
+							<li>
+								How many graduate students write shell scripts to
+								analyze each new data set instead of running those
+								analyses by hand?
+							</li>
+						</ol>
+						<canvas id="pie-hand-vs-shell"
+								data-type="Pie" width="200px" height="200px"
+								style="position: absolute; right: 0; bottom: 0" >
+						</canvas>
+						<script type="text/javascript">
+							PieChart(id="pie-hand-vs-shell", data=[
+								{value: 5, color: "#F38630"},
+								{value: 3, color: "#69D2E7"},
+								]);
+						</script>
+					</section>
+				</section> <!-- surely you're exaggerating -->
+
 				<section>
 					<h1>THE END</h1>
 				</section>