Update material

Author: curran

introDataVisD3/README.md

@@ -1 +1 @@
-This material is for the presentation in this YouTube video: ["Introduction to Data Visualization"](https://www.youtube.com/watch?v=itNlukt5x18&feature=youtu.be). You can [open the presentation](http://curran.github.io/screencasts/introDataVisD3/) to follow along, and you can use the built-in editor to edit and fork the examples.
+This material is for the presentation in this YouTube video: ["Introduction to Data Visualization"](https://www.youtube.com/watch?v=itNlukt5x18&feature=youtu.be). You can [open the presentation](http://curran.github.io/screencasts/introDataVisD3/) to follow along (use arrow keys), and you can use the built-in [Blockbuilder editor](http://blockbuilder.org) to edit and fork the examples.

introDataVisD3/dist/main-build.js

@@ -136,6 +136,9 @@
     return controller;
   }
 
+  // Images are hosted by GitHub Pages (so they don't bloat the datavis-tech repository or hose our servers).
+  var imageRootUrl = "http://curran.github.io/screencasts/introDataVisD3/images";
+
   var ContentPane = React.createClass({
     displayName: "ContentPane",
 
@@ -176,7 +179,7 @@
         return React.createElement(
           "div",
           { className: "content" },
-          React.createElement("img", { className: "img", style: { backgroundImage: "url(images/" + item.name + ")" } }),
+          React.createElement("img", { className: "img", style: { backgroundImage: "url(" + imageRootUrl + "/" + item.name + ")" } }),
           React.createElement(
             "div",
             { className: "footnote" },
@@ -226,15 +229,20 @@
   arrowKeyNavigation(controller);
   loadData(controller);
 
-  // Display video from the camera on the video element.
-  // Example code from http://www.html5rocks.com/en/tutorials/getusermedia/intro/
-  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
-
-  navigator.getUserMedia({ video: true }, function (localMediaStream) {
-    var video = document.querySelector('.face-video');
-    video.src = window.URL.createObjectURL(localMediaStream);
-  }, function (e) {
-    console.log("Error " + e);
-  });
+  //Commented out for production.
+  //
+  // // Display video from the camera on the video element.
+  // // Example code from http://www.html5rocks.com/en/tutorials/getusermedia/intro/
+  // navigator.getUserMedia  = navigator.getUserMedia ||
+  //                           navigator.webkitGetUserMedia ||
+  //                           navigator.mozGetUserMedia ||
+  //                           navigator.msGetUserMedia;
+  //
+  // navigator.getUserMedia({ video: true }, function (localMediaStream) {
+  //   var video = document.querySelector('.face-video');
+  //   video.src = window.URL.createObjectURL(localMediaStream);
+  // }, function (e) {
+  //   console.log("Error " + e);
+  // });
 
 }());

introDataVisD3/index.html

@@ -23,8 +23,23 @@
 
 
     <!-- This box shows my face live from the camera. -->
-    <!-- from https://github.com/curran/screencasts/blob/gh-pages/splittingCharts/examples/viewer/index.html -->
+    <!-- from https://github.com/curran/screencasts/blob/gh-pages/splittingCharts/examples/viewer/index.html
     <video class="face-video" width="300" autoplay></video>
 
+    Commented out for production.
+
+    -->
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-73285761-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+
   </body>
 </html>

introDataVisD3/src/contentPane.js

@@ -1,3 +1,7 @@
+
+// Images are hosted by GitHub Pages (so they don't bloat the datavis-tech repository or hose our servers).
+var imageRootUrl = "http://curran.github.io/screencasts/introDataVisD3/images";
+
 var ContentPane = React.createClass({
   render: function (){
     var item = this.props.item;
@@ -29,7 +33,7 @@ var ContentPane = React.createClass({
     } else if (item.type === "image"){
       return (
         <div className="content">
-          <img className="img" style={{backgroundImage: "url(images/" + item.name + ")"}}/>
+          <img className="img" style={{backgroundImage: "url(" + imageRootUrl + "/" + item.name + ")"}}/>
           <div className="footnote">{source}: {item.description}</div>
         </div>
       );

introDataVisD3/src/main.js

@@ -40,16 +40,18 @@ loadData(controller);
 
 
 
-// Display video from the camera on the video element.
-// Example code from http://www.html5rocks.com/en/tutorials/getusermedia/intro/
-navigator.getUserMedia  = navigator.getUserMedia ||
-                          navigator.webkitGetUserMedia ||
-                          navigator.mozGetUserMedia ||
-                          navigator.msGetUserMedia;
-
-navigator.getUserMedia({ video: true }, function (localMediaStream) {
-  var video = document.querySelector('.face-video');
-  video.src = window.URL.createObjectURL(localMediaStream);
-}, function (e) {
-  console.log("Error " + e);
-});
+//Commented out for production.
+//
+// // Display video from the camera on the video element.
+// // Example code from http://www.html5rocks.com/en/tutorials/getusermedia/intro/
+// navigator.getUserMedia  = navigator.getUserMedia ||
+//                           navigator.webkitGetUserMedia ||
+//                           navigator.mozGetUserMedia ||
+//                           navigator.msGetUserMedia;
+// 
+// navigator.getUserMedia({ video: true }, function (localMediaStream) {
+//   var video = document.querySelector('.face-video');
+//   video.src = window.URL.createObjectURL(localMediaStream);
+// }, function (e) {
+//   console.log("Error " + e);
+// });