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 971c5d5b6ae3f513a30d31d4903931aa7b494271..7533e3645ceeefbc16846a6d54c238bc9b3a133b 100644 (file)
--- 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>