├── .gitignore ├── README.md ├── index.html ├── slides ├── .gitignore ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── css │ ├── print │ │ ├── paper.css │ │ └── pdf.css │ ├── reveal.css │ └── theme │ │ ├── README.md │ │ ├── beige.css │ │ ├── blood.css │ │ ├── default.css │ │ ├── moon.css │ │ ├── night.css │ │ ├── serif.css │ │ ├── simple.css │ │ ├── sky.css │ │ ├── solarized.css │ │ ├── source │ │ ├── beige.scss │ │ ├── blood.scss │ │ ├── default.scss │ │ ├── moon.scss │ │ ├── night.scss │ │ ├── serif.scss │ │ ├── simple.scss │ │ ├── sky.scss │ │ └── solarized.scss │ │ └── template │ │ ├── mixins.scss │ │ ├── settings.scss │ │ └── theme.scss ├── demos │ ├── AI-editor │ │ ├── angular.js │ │ ├── app.js │ │ ├── css │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.min.css │ │ │ └── style.css │ │ ├── d3.js │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ └── glyphicons-halflings-regular.woff │ │ └── index.html │ ├── a-donut-chart-editor │ │ ├── angular-route.js │ │ ├── angular.js │ │ ├── app.js │ │ ├── d3.js │ │ ├── donut-chart.directive.js │ │ ├── edit.html │ │ ├── graph.html │ │ ├── index.html │ │ ├── live.html │ │ └── style.css │ ├── arch-angels │ │ ├── Church_Heart_of_the_Andes.jpg │ │ ├── angel.png │ │ ├── d3.js │ │ └── index.html │ ├── d3-intro │ │ ├── d3.js │ │ └── div-bar-chart.html │ ├── lets-make-a-donut-chart-directive │ │ ├── angular.js │ │ ├── d3.js │ │ ├── v0-directive.html │ │ ├── v0.1-d3-layout.pie.html │ │ ├── v0.2-d3-layout.pie.html │ │ ├── v0.5-directive.html │ │ ├── v0.5.1-directive.html │ │ ├── v0.5.2-directive.html │ │ ├── v1-directive.html │ │ ├── v1.1-directive.html │ │ ├── v2-sharing-data.html │ │ ├── v2.1-sharing-data.html │ │ ├── v3-updating-data.html │ │ ├── v3.1-updating-data.html │ │ ├── v4-updating-shared-data-with-watch-and-apply.html │ │ ├── v4.1-updating-shared-data-with-watch-and-apply.html │ │ ├── v5-ng-repeat-and-scope-inheritance-part1.html │ │ ├── v6-ng-repeat-and-scope-inheritance-part2.html │ │ ├── v7-animation.html │ │ ├── v8-enter-and-exit.html │ │ └── v9-using-a-controller-and-seperating-out-business-logic.html │ ├── life-expectancy │ │ ├── 12s0108.xls │ │ ├── angular.js │ │ ├── d3.js │ │ ├── index.html │ │ ├── life-expectancy-by-sex-race-and-state.csv │ │ ├── states.topojson │ │ ├── style.css │ │ └── topojson.js │ ├── live-code-donut-chart │ │ ├── angular.js │ │ ├── arctween.snippet.js │ │ ├── d3.js │ │ ├── enter-exit.snippet.js │ │ ├── index.html │ │ ├── mousedown.snippet.js │ │ ├── start.html │ │ ├── trial-1.html │ │ ├── trial-2.html │ │ ├── trial-3.html │ │ ├── trial-4.html │ │ ├── trial-5.html │ │ ├── trial-6-talk1.html │ │ ├── trial-7.talk2.1.html │ │ └── trial-8.talk2.2.html │ └── responsive │ │ ├── angular.js │ │ ├── app.js │ │ ├── bar-chart.directive.js │ │ ├── d3.js │ │ └── index.html ├── img │ ├── andrew-gelman-school-vouchers-map.png │ ├── anscombes_quartet.svg │ ├── central-limit-theorem.png │ ├── d3-on-angular.png │ ├── donut-chart-1.png │ ├── hackreactor-logo-white-bg.png │ ├── hackreactor-logo.png │ ├── hello-kitty.png │ ├── hp-spog-1.png │ ├── hp-spog-2.png │ ├── monsoonco-logo-black-bg.png │ ├── monsoonco-logo.png │ ├── monty-hall.png │ ├── paolo-de-matteis.jpg │ ├── simpsons-paradox.png │ ├── small-multiples-with-ng-repeat.png │ ├── the-horse-in-motion.gif │ └── the-horse-in-motion.jpg ├── index.html ├── js │ ├── reveal.js │ └── reveal.min.js ├── lib │ ├── css │ │ ├── twilight.css │ │ └── zenburn.css │ ├── font │ │ ├── league_gothic-webfont.eot │ │ ├── league_gothic-webfont.svg │ │ ├── league_gothic-webfont.ttf │ │ ├── league_gothic-webfont.woff │ │ └── league_gothic_license │ └── js │ │ ├── classList.js │ │ ├── head.min.js │ │ └── html5shiv.js ├── package.json ├── plugin │ ├── highlight │ │ └── highlight.js │ ├── leap │ │ └── leap.js │ ├── markdown │ │ ├── example.html │ │ ├── example.md │ │ ├── markdown.js │ │ └── marked.js │ ├── math │ │ └── math.js │ ├── multiplex │ │ ├── client.js │ │ ├── index.js │ │ └── master.js │ ├── notes-server │ │ ├── client.js │ │ ├── index.js │ │ └── notes.html │ ├── notes │ │ ├── notes.html │ │ └── notes.js │ ├── postmessage │ │ ├── example.html │ │ └── postmessage.js │ ├── print-pdf │ │ └── print-pdf.js │ ├── remotes │ │ └── remotes.js │ ├── search │ │ └── search.js │ └── zoom-js │ │ └── zoom.js └── test │ ├── examples │ ├── assets │ │ ├── image1.png │ │ └── image2.png │ ├── barebones.html │ ├── embedded-media.html │ ├── math.html │ └── slide-backgrounds.html │ ├── qunit-1.12.0.css │ ├── qunit-1.12.0.js │ ├── test-markdown-element-attributes.html │ ├── test-markdown-element-attributes.js │ ├── test-markdown-slide-attributes.html │ ├── test-markdown-slide-attributes.js │ ├── test-markdown.html │ ├── test-markdown.js │ ├── test.html │ └── test.js └── talk.sh /.gitignore: -------------------------------------------------------------------------------- 1 | notes.txt 2 | todo.md 3 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slides from my Angular + D3 meetup talk at Google 2 | === 3 | [View Slideshow](http://vicapow.github.io/angular-d3-talk/slides/) 4 | 5 | ## Demos 6 | 7 | all the demos can be found under `slides/demos`. here's a few quick lines to each 8 | 9 | + [AI Editor](http://vicapow.github.io/angular-d3-talk/slides/demos/AI-editor/index.html) 10 | + [A Donut Chart Creator](http://vicapow.github.io/angular-d3-talk/slides/demos/a-donut-chart-editor/index.html) 11 | + [A DIV Bar Chart](http://vicapow.github.io/angular-d3-talk/slides/demos/d3-intro/div-bar-chart.html) 12 | + [Lets Make A Donut Chart](http://vicapow.github.io/angular-d3-talk/slides/demos/lets-make-a-donut-chart-directive/v9-using-a-controller-and-seperating-out-business-logic.html) 13 | + [Life Expectancy](http://vicapow.github.io/angular-d3-talk/slides/demos/life-expectancy/index.html) 14 | + [Responsive](http://vicapow.github.io/angular-d3-talk/slides/demos/responsive/index.html) 15 | 16 | 17 | ## Angular + D3 book 18 | 19 | I've written an e-book that goes into much more detail: 20 | 21 | [https://leanpub.com/d3angularjs](https://leanpub.com/d3angularjs) 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Slides from my Angular meetup talk at Google

5 | 6 | fork the code here 7 | 8 |

By Victor Powell @vicapow

9 | 10 |

Demos

11 | 12 |

all the demos can be found under slides/demos. here's a few quick lines to each

13 | 14 | 22 | 23 | -------------------------------------------------------------------------------- /slides/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .svn 3 | log/*.log 4 | tmp/** 5 | node_modules/ 6 | .sass-cache -------------------------------------------------------------------------------- /slides/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.8 4 | before_script: 5 | - npm install -g grunt-cli -------------------------------------------------------------------------------- /slides/Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* global module:false */ 2 | 3 | module.exports = function(grunt) { 4 | var port = grunt.option('port') || 8000; 5 | // Project configuration 6 | grunt.initConfig({ 7 | pkg: grunt.file.readJSON('package.json'), 8 | meta: { 9 | banner: 10 | '/*!\n' + 11 | ' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + 12 | ' * http://lab.hakim.se/reveal-js\n' + 13 | ' * MIT licensed\n' + 14 | ' *\n' + 15 | ' * Copyright (C) 2013 Hakim El Hattab, http://hakim.se\n' + 16 | ' */' 17 | }, 18 | 19 | qunit: { 20 | files: [ 'test/*.html' ] 21 | }, 22 | 23 | uglify: { 24 | options: { 25 | banner: '<%= meta.banner %>\n' 26 | }, 27 | build: { 28 | src: 'js/reveal.js', 29 | dest: 'js/reveal.min.js' 30 | } 31 | }, 32 | 33 | cssmin: { 34 | compress: { 35 | files: { 36 | 'css/reveal.min.css': [ 'css/reveal.css' ] 37 | } 38 | } 39 | }, 40 | 41 | sass: { 42 | main: { 43 | files: { 44 | 'css/theme/default.css': 'css/theme/source/default.scss', 45 | 'css/theme/beige.css': 'css/theme/source/beige.scss', 46 | 'css/theme/night.css': 'css/theme/source/night.scss', 47 | 'css/theme/serif.css': 'css/theme/source/serif.scss', 48 | 'css/theme/simple.css': 'css/theme/source/simple.scss', 49 | 'css/theme/sky.css': 'css/theme/source/sky.scss', 50 | 'css/theme/moon.css': 'css/theme/source/moon.scss', 51 | 'css/theme/solarized.css': 'css/theme/source/solarized.scss', 52 | 'css/theme/blood.css': 'css/theme/source/blood.scss' 53 | } 54 | } 55 | }, 56 | 57 | jshint: { 58 | options: { 59 | curly: false, 60 | eqeqeq: true, 61 | immed: true, 62 | latedef: true, 63 | newcap: true, 64 | noarg: true, 65 | sub: true, 66 | undef: true, 67 | eqnull: true, 68 | browser: true, 69 | expr: true, 70 | globals: { 71 | head: false, 72 | module: false, 73 | console: false, 74 | unescape: false 75 | } 76 | }, 77 | files: [ 'Gruntfile.js', 'js/reveal.js' ] 78 | }, 79 | 80 | connect: { 81 | server: { 82 | options: { 83 | port: port, 84 | base: '.' 85 | } 86 | } 87 | }, 88 | 89 | zip: { 90 | 'reveal-js-presentation.zip': [ 91 | 'index.html', 92 | 'css/**', 93 | 'js/**', 94 | 'lib/**', 95 | 'images/**', 96 | 'plugin/**' 97 | ] 98 | }, 99 | 100 | watch: { 101 | main: { 102 | files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ], 103 | tasks: 'default' 104 | }, 105 | theme: { 106 | files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ], 107 | tasks: 'themes' 108 | } 109 | } 110 | 111 | }); 112 | 113 | // Dependencies 114 | grunt.loadNpmTasks( 'grunt-contrib-qunit' ); 115 | grunt.loadNpmTasks( 'grunt-contrib-jshint' ); 116 | grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); 117 | grunt.loadNpmTasks( 'grunt-contrib-uglify' ); 118 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 119 | grunt.loadNpmTasks( 'grunt-contrib-sass' ); 120 | grunt.loadNpmTasks( 'grunt-contrib-connect' ); 121 | grunt.loadNpmTasks( 'grunt-zip' ); 122 | 123 | // Default task 124 | grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify', 'qunit' ] ); 125 | 126 | // Theme task 127 | grunt.registerTask( 'themes', [ 'sass' ] ); 128 | 129 | // Package presentation to archive 130 | grunt.registerTask( 'package', [ 'default', 'zip' ] ); 131 | 132 | // Serve presentation locally 133 | grunt.registerTask( 'serve', [ 'connect', 'watch' ] ); 134 | 135 | // Run tests 136 | grunt.registerTask( 'test', [ 'jshint', 'qunit' ] ); 137 | 138 | }; 139 | -------------------------------------------------------------------------------- /slides/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2013 Hakim El Hattab, http://hakim.se 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /slides/css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | /* SECTION 1: Set default width, margin, float, and 10 | background. This prevents elements from extending 11 | beyond the edge of the printed page, and prevents 12 | unnecessary background images from printing */ 13 | 14 | * { 15 | -webkit-print-color-adjust: exact; 16 | } 17 | 18 | body { 19 | font-size: 18pt; 20 | width: 297mm; 21 | height: 229mm; 22 | margin: 0 auto !important; 23 | border: 0; 24 | padding: 0; 25 | float: none !important; 26 | overflow: visible; 27 | } 28 | 29 | html { 30 | width: 100%; 31 | height: 100%; 32 | overflow: visible; 33 | } 34 | 35 | @page { 36 | size: letter landscape; 37 | margin: 0; 38 | } 39 | 40 | /* SECTION 2: Remove any elements not needed in print. 41 | This would include navigation, ads, sidebars, etc. */ 42 | .nestedarrow, 43 | .controls, 44 | .reveal .progress, 45 | .reveal.overview, 46 | .fork-reveal, 47 | .share-reveal, 48 | .state-background { 49 | display: none !important; 50 | } 51 | 52 | /* SECTION 3: Set body font face, size, and color. 53 | Consider using a serif font for readability. */ 54 | body, p, td, li, div { 55 | font-size: 18pt; 56 | } 57 | 58 | /* SECTION 4: Set heading font face, sizes, and color. 59 | Differentiate your headings from your body text. 60 | Perhaps use a large sans-serif for distinction. */ 61 | h1,h2,h3,h4,h5,h6 { 62 | text-shadow: 0 0 0 #000 !important; 63 | } 64 | 65 | /* SECTION 5: Make hyperlinks more usable. 66 | Ensure links are underlined, and consider appending 67 | the URL to the end of the link for usability. */ 68 | a:link, 69 | a:visited { 70 | font-weight: normal; 71 | text-decoration: underline; 72 | } 73 | 74 | .reveal pre code { 75 | overflow: hidden !important; 76 | font-family: monospace !important; 77 | } 78 | 79 | 80 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 81 | ul, ol, div, p { 82 | visibility: visible; 83 | position: static; 84 | width: auto; 85 | height: auto; 86 | display: block; 87 | overflow: visible; 88 | margin: auto; 89 | } 90 | .reveal { 91 | width: auto !important; 92 | height: auto !important; 93 | overflow: hidden !important; 94 | } 95 | .reveal .slides { 96 | position: static; 97 | width: 100%; 98 | height: auto; 99 | 100 | left: auto; 101 | top: auto; 102 | margin: 0 !important; 103 | padding: 0 !important; 104 | 105 | overflow: visible; 106 | display: block; 107 | 108 | text-align: center; 109 | 110 | -webkit-perspective: none; 111 | -moz-perspective: none; 112 | -ms-perspective: none; 113 | perspective: none; 114 | 115 | -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ 116 | -moz-perspective-origin: 50% 50%; 117 | -ms-perspective-origin: 50% 50%; 118 | perspective-origin: 50% 50%; 119 | } 120 | .reveal .slides section { 121 | 122 | page-break-after: always !important; 123 | 124 | visibility: visible !important; 125 | position: relative !important; 126 | width: 100% !important; 127 | height: 229mm !important; 128 | min-height: 229mm !important; 129 | display: block !important; 130 | overflow: hidden !important; 131 | 132 | left: 0 !important; 133 | top: 0 !important; 134 | margin: 0 !important; 135 | padding: 2cm 2cm 0 2cm !important; 136 | box-sizing: border-box !important; 137 | 138 | opacity: 1 !important; 139 | 140 | -webkit-transform-style: flat !important; 141 | -moz-transform-style: flat !important; 142 | -ms-transform-style: flat !important; 143 | transform-style: flat !important; 144 | 145 | -webkit-transform: none !important; 146 | -moz-transform: none !important; 147 | -ms-transform: none !important; 148 | transform: none !important; 149 | } 150 | .reveal section.stack { 151 | margin: 0 !important; 152 | padding: 0 !important; 153 | page-break-after: avoid !important; 154 | height: auto !important; 155 | min-height: auto !important; 156 | } 157 | .reveal .absolute-element { 158 | margin-left: 2.2cm; 159 | margin-top: 1.8cm; 160 | } 161 | .reveal section .fragment { 162 | opacity: 1 !important; 163 | visibility: visible !important; 164 | 165 | -webkit-transform: none !important; 166 | -moz-transform: none !important; 167 | -ms-transform: none !important; 168 | transform: none !important; 169 | } 170 | .reveal section .slide-background { 171 | position: absolute; 172 | top: 0; 173 | left: 0; 174 | width: 100%; 175 | z-index: 0; 176 | } 177 | .reveal section>* { 178 | position: relative; 179 | z-index: 1; 180 | } 181 | .reveal img { 182 | box-shadow: none; 183 | } 184 | .reveal .roll { 185 | overflow: visible; 186 | line-height: 1em; 187 | } 188 | .reveal small a { 189 | font-size: 16pt !important; 190 | } 191 | -------------------------------------------------------------------------------- /slides/css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup 4 | 5 | You also need to install Ruby and then Sass (with `gem install sass`). 6 | 7 | ## Creating a Theme 8 | 9 | To create your own theme, start by duplicating any ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source) and adding it to the compilation list in the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js). 10 | 11 | Each theme file does four things in the following order: 12 | 13 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 14 | Shared utility functions. 15 | 16 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 17 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 18 | 19 | 3. **Override** 20 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding full selectors with hardcoded styles. 21 | 22 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 23 | The template theme file which will generate final CSS output based on the currently defined variables. 24 | 25 | When you are done, run `grunt themes` to compile the Sass file to CSS and you are ready to use your new theme. 26 | -------------------------------------------------------------------------------- /slides/css/theme/moon.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 2 | /** 3 | * Solarized Dark theme for reveal.js. 4 | * Author: Achim Staebler 5 | */ 6 | @font-face { 7 | font-family: 'League Gothic'; 8 | src: url("../../lib/font/league_gothic-webfont.eot"); 9 | src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; } 12 | 13 | /** 14 | * Solarized colors by Ethan Schoonover 15 | */ 16 | html * { 17 | color-profile: sRGB; 18 | rendering-intent: auto; } 19 | 20 | /********************************************* 21 | * GLOBAL STYLES 22 | *********************************************/ 23 | body { 24 | background: #002b36; 25 | background-color: #002b36; } 26 | 27 | .reveal { 28 | font-family: "Lato", sans-serif; 29 | font-size: 36px; 30 | font-weight: normal; 31 | letter-spacing: -0.02em; 32 | color: #93a1a1; } 33 | 34 | ::selection { 35 | color: white; 36 | background: #d33682; 37 | text-shadow: none; } 38 | 39 | /********************************************* 40 | * HEADERS 41 | *********************************************/ 42 | .reveal h1, 43 | .reveal h2, 44 | .reveal h3, 45 | .reveal h4, 46 | .reveal h5, 47 | .reveal h6 { 48 | margin: 0 0 20px 0; 49 | color: #eee8d5; 50 | font-family: "League Gothic", Impact, sans-serif; 51 | line-height: 0.9em; 52 | letter-spacing: 0.02em; 53 | text-transform: uppercase; 54 | text-shadow: none; } 55 | 56 | .reveal h1 { 57 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 58 | 59 | /********************************************* 60 | * LINKS 61 | *********************************************/ 62 | .reveal a:not(.image) { 63 | color: #268bd2; 64 | text-decoration: none; 65 | -webkit-transition: color .15s ease; 66 | -moz-transition: color .15s ease; 67 | -ms-transition: color .15s ease; 68 | -o-transition: color .15s ease; 69 | transition: color .15s ease; } 70 | 71 | .reveal a:not(.image):hover { 72 | color: #78b9e6; 73 | text-shadow: none; 74 | border: none; } 75 | 76 | .reveal .roll span:after { 77 | color: #fff; 78 | background: #1a6091; } 79 | 80 | /********************************************* 81 | * IMAGES 82 | *********************************************/ 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255, 255, 255, 0.12); 86 | border: 4px solid #93a1a1; 87 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 88 | -webkit-transition: all .2s linear; 89 | -moz-transition: all .2s linear; 90 | -ms-transition: all .2s linear; 91 | -o-transition: all .2s linear; 92 | transition: all .2s linear; } 93 | 94 | .reveal a:hover img { 95 | background: rgba(255, 255, 255, 0.2); 96 | border-color: #268bd2; 97 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 98 | 99 | /********************************************* 100 | * NAVIGATION CONTROLS 101 | *********************************************/ 102 | .reveal .controls div.navigate-left, 103 | .reveal .controls div.navigate-left.enabled { 104 | border-right-color: #268bd2; } 105 | 106 | .reveal .controls div.navigate-right, 107 | .reveal .controls div.navigate-right.enabled { 108 | border-left-color: #268bd2; } 109 | 110 | .reveal .controls div.navigate-up, 111 | .reveal .controls div.navigate-up.enabled { 112 | border-bottom-color: #268bd2; } 113 | 114 | .reveal .controls div.navigate-down, 115 | .reveal .controls div.navigate-down.enabled { 116 | border-top-color: #268bd2; } 117 | 118 | .reveal .controls div.navigate-left.enabled:hover { 119 | border-right-color: #78b9e6; } 120 | 121 | .reveal .controls div.navigate-right.enabled:hover { 122 | border-left-color: #78b9e6; } 123 | 124 | .reveal .controls div.navigate-up.enabled:hover { 125 | border-bottom-color: #78b9e6; } 126 | 127 | .reveal .controls div.navigate-down.enabled:hover { 128 | border-top-color: #78b9e6; } 129 | 130 | /********************************************* 131 | * PROGRESS BAR 132 | *********************************************/ 133 | .reveal .progress { 134 | background: rgba(0, 0, 0, 0.2); } 135 | 136 | .reveal .progress span { 137 | background: #268bd2; 138 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 139 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 140 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 141 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 142 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 143 | 144 | /********************************************* 145 | * SLIDE NUMBER 146 | *********************************************/ 147 | .reveal .slide-number { 148 | color: #268bd2; } 149 | -------------------------------------------------------------------------------- /slides/css/theme/night.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 3 | /** 4 | * Black theme for reveal.js. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #111111; 13 | background-color: #111111; } 14 | 15 | .reveal { 16 | font-family: "Open Sans", sans-serif; 17 | font-size: 30px; 18 | font-weight: normal; 19 | letter-spacing: -0.02em; 20 | color: #eeeeee; } 21 | 22 | ::selection { 23 | color: white; 24 | background: #e7ad52; 25 | text-shadow: none; } 26 | 27 | /********************************************* 28 | * HEADERS 29 | *********************************************/ 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: 0 0 20px 0; 37 | color: #eeeeee; 38 | font-family: "Montserrat", Impact, sans-serif; 39 | line-height: 0.9em; 40 | letter-spacing: -0.03em; 41 | text-transform: none; 42 | text-shadow: none; } 43 | 44 | .reveal h1 { 45 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 46 | 47 | /********************************************* 48 | * LINKS 49 | *********************************************/ 50 | .reveal a:not(.image) { 51 | color: #e7ad52; 52 | text-decoration: none; 53 | -webkit-transition: color .15s ease; 54 | -moz-transition: color .15s ease; 55 | -ms-transition: color .15s ease; 56 | -o-transition: color .15s ease; 57 | transition: color .15s ease; } 58 | 59 | .reveal a:not(.image):hover { 60 | color: #f3d7ac; 61 | text-shadow: none; 62 | border: none; } 63 | 64 | .reveal .roll span:after { 65 | color: #fff; 66 | background: #d08a1d; } 67 | 68 | /********************************************* 69 | * IMAGES 70 | *********************************************/ 71 | .reveal section img { 72 | margin: 15px 0px; 73 | background: rgba(255, 255, 255, 0.12); 74 | border: 4px solid #eeeeee; 75 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 76 | -webkit-transition: all .2s linear; 77 | -moz-transition: all .2s linear; 78 | -ms-transition: all .2s linear; 79 | -o-transition: all .2s linear; 80 | transition: all .2s linear; } 81 | 82 | .reveal a:hover img { 83 | background: rgba(255, 255, 255, 0.2); 84 | border-color: #e7ad52; 85 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 86 | 87 | /********************************************* 88 | * NAVIGATION CONTROLS 89 | *********************************************/ 90 | .reveal .controls div.navigate-left, 91 | .reveal .controls div.navigate-left.enabled { 92 | border-right-color: #e7ad52; } 93 | 94 | .reveal .controls div.navigate-right, 95 | .reveal .controls div.navigate-right.enabled { 96 | border-left-color: #e7ad52; } 97 | 98 | .reveal .controls div.navigate-up, 99 | .reveal .controls div.navigate-up.enabled { 100 | border-bottom-color: #e7ad52; } 101 | 102 | .reveal .controls div.navigate-down, 103 | .reveal .controls div.navigate-down.enabled { 104 | border-top-color: #e7ad52; } 105 | 106 | .reveal .controls div.navigate-left.enabled:hover { 107 | border-right-color: #f3d7ac; } 108 | 109 | .reveal .controls div.navigate-right.enabled:hover { 110 | border-left-color: #f3d7ac; } 111 | 112 | .reveal .controls div.navigate-up.enabled:hover { 113 | border-bottom-color: #f3d7ac; } 114 | 115 | .reveal .controls div.navigate-down.enabled:hover { 116 | border-top-color: #f3d7ac; } 117 | 118 | /********************************************* 119 | * PROGRESS BAR 120 | *********************************************/ 121 | .reveal .progress { 122 | background: rgba(0, 0, 0, 0.2); } 123 | 124 | .reveal .progress span { 125 | background: #e7ad52; 126 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 127 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 128 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 131 | 132 | /********************************************* 133 | * SLIDE NUMBER 134 | *********************************************/ 135 | .reveal .slide-number { 136 | color: #e7ad52; } 137 | -------------------------------------------------------------------------------- /slides/css/theme/simple.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 2 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 3 | /** 4 | * A simple theme for reveal.js presentations, similar 5 | * to the default theme. The accent color is darkblue. 6 | * 7 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 8 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 9 | */ 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: white; 15 | background-color: white; } 16 | 17 | .reveal { 18 | font-family: "Lato", sans-serif; 19 | font-size: 36px; 20 | font-weight: normal; 21 | letter-spacing: -0.02em; 22 | color: black; } 23 | 24 | ::selection { 25 | color: white; 26 | background: rgba(0, 0, 0, 0.99); 27 | text-shadow: none; } 28 | 29 | /********************************************* 30 | * HEADERS 31 | *********************************************/ 32 | .reveal h1, 33 | .reveal h2, 34 | .reveal h3, 35 | .reveal h4, 36 | .reveal h5, 37 | .reveal h6 { 38 | margin: 0 0 20px 0; 39 | color: black; 40 | font-family: "News Cycle", Impact, sans-serif; 41 | line-height: 0.9em; 42 | letter-spacing: 0.02em; 43 | text-transform: none; 44 | text-shadow: none; } 45 | 46 | .reveal h1 { 47 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } 48 | 49 | /********************************************* 50 | * LINKS 51 | *********************************************/ 52 | .reveal a:not(.image) { 53 | color: darkblue; 54 | text-decoration: none; 55 | -webkit-transition: color .15s ease; 56 | -moz-transition: color .15s ease; 57 | -ms-transition: color .15s ease; 58 | -o-transition: color .15s ease; 59 | transition: color .15s ease; } 60 | 61 | .reveal a:not(.image):hover { 62 | color: #0000f1; 63 | text-shadow: none; 64 | border: none; } 65 | 66 | .reveal .roll span:after { 67 | color: #fff; 68 | background: #00003f; } 69 | 70 | /********************************************* 71 | * IMAGES 72 | *********************************************/ 73 | .reveal section img { 74 | margin: 15px 0px; 75 | background: rgba(255, 255, 255, 0.12); 76 | border: 4px solid black; 77 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 78 | -webkit-transition: all .2s linear; 79 | -moz-transition: all .2s linear; 80 | -ms-transition: all .2s linear; 81 | -o-transition: all .2s linear; 82 | transition: all .2s linear; } 83 | 84 | .reveal a:hover img { 85 | background: rgba(255, 255, 255, 0.2); 86 | border-color: darkblue; 87 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 88 | 89 | /********************************************* 90 | * NAVIGATION CONTROLS 91 | *********************************************/ 92 | .reveal .controls div.navigate-left, 93 | .reveal .controls div.navigate-left.enabled { 94 | border-right-color: darkblue; } 95 | 96 | .reveal .controls div.navigate-right, 97 | .reveal .controls div.navigate-right.enabled { 98 | border-left-color: darkblue; } 99 | 100 | .reveal .controls div.navigate-up, 101 | .reveal .controls div.navigate-up.enabled { 102 | border-bottom-color: darkblue; } 103 | 104 | .reveal .controls div.navigate-down, 105 | .reveal .controls div.navigate-down.enabled { 106 | border-top-color: darkblue; } 107 | 108 | .reveal .controls div.navigate-left.enabled:hover { 109 | border-right-color: #0000f1; } 110 | 111 | .reveal .controls div.navigate-right.enabled:hover { 112 | border-left-color: #0000f1; } 113 | 114 | .reveal .controls div.navigate-up.enabled:hover { 115 | border-bottom-color: #0000f1; } 116 | 117 | .reveal .controls div.navigate-down.enabled:hover { 118 | border-top-color: #0000f1; } 119 | 120 | /********************************************* 121 | * PROGRESS BAR 122 | *********************************************/ 123 | .reveal .progress { 124 | background: rgba(0, 0, 0, 0.2); } 125 | 126 | .reveal .progress span { 127 | background: darkblue; 128 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 129 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 130 | -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 131 | -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 132 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 133 | 134 | /********************************************* 135 | * SLIDE NUMBER 136 | *********************************************/ 137 | .reveal .slide-number { 138 | color: darkblue; } 139 | -------------------------------------------------------------------------------- /slides/css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | 31 | // Override theme settings (see ../template/settings.scss) 32 | $mainColor: #333; 33 | $headingColor: #333; 34 | $headingTextShadow: none; 35 | $backgroundColor: #f7f3de; 36 | $linkColor: #8b743d; 37 | $linkColorHover: lighten( $linkColor, 20% ); 38 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 39 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 40 | 41 | // Background generator 42 | @mixin bodyBackground() { 43 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 44 | } 45 | 46 | 47 | 48 | // Theme template ------------------------------ 49 | @import "../template/theme"; 50 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/blood.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Blood theme for reveal.js 3 | * Author: Walther http://github.com/Walther 4 | * 5 | * Designed to be used with highlight.js theme 6 | * "monokai_sublime.css" available from 7 | * https://github.com/isagalaev/highlight.js/ 8 | * 9 | * For other themes, change $codeBackground accordingly. 10 | * 11 | */ 12 | 13 | // Default mixins and settings ----------------- 14 | @import "../template/mixins"; 15 | @import "../template/settings"; 16 | // --------------------------------------------- 17 | 18 | // Include theme-specific fonts 19 | 20 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); 21 | 22 | // Colors used in the theme 23 | $blood: #a23; 24 | $coal: #222; 25 | $codeBackground: #23241f; 26 | 27 | // Main text 28 | $mainFont: Ubuntu, 'sans-serif'; 29 | $mainFontSize: 36px; 30 | $mainColor: #eee; 31 | 32 | // Headings 33 | $headingFont: Ubuntu, 'sans-serif'; 34 | $headingTextShadow: 2px 2px 2px $coal; 35 | 36 | // h1 shadow, borrowed humbly from 37 | // (c) Default theme by Hakim El Hattab 38 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 39 | 40 | // Links 41 | $linkColor: $blood; 42 | $linkColorHover: lighten( $linkColor, 20% ); 43 | 44 | // Text selection 45 | $selectionBackgroundColor: $blood; 46 | $selectionColor: #fff; 47 | 48 | // Background generator 49 | @mixin bodyBackground() { 50 | @include radial-gradient( $coal, lighten( $coal, 25% ) ); 51 | } 52 | 53 | // Theme template ------------------------------ 54 | @import "../template/theme"; 55 | // --------------------------------------------- 56 | 57 | // some overrides after theme template import 58 | 59 | .reveal p { 60 | font-weight: 300; 61 | text-shadow: 1px 1px $coal; 62 | } 63 | 64 | .reveal h1, 65 | .reveal h2, 66 | .reveal h3, 67 | .reveal h4, 68 | .reveal h5, 69 | .reveal h6 { 70 | font-weight: 700; 71 | } 72 | 73 | .reveal a:not(.image), 74 | .reveal a:not(.image):hover { 75 | text-shadow: 2px 2px 2px #000; 76 | } 77 | 78 | .reveal small a:not(.image), 79 | .reveal small a:not(.image):hover { 80 | text-shadow: 1px 1px 1px #000; 81 | } 82 | 83 | .reveal p code { 84 | background-color: $codeBackground; 85 | display: inline-block; 86 | border-radius: 7px; 87 | } 88 | 89 | .reveal small code { 90 | vertical-align: baseline; 91 | } -------------------------------------------------------------------------------- /slides/css/theme/source/default.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Default theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @font-face { 17 | font-family: 'League Gothic'; 18 | src: url('../../lib/font/league_gothic-webfont.eot'); 19 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 20 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 21 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 22 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 23 | 24 | font-weight: normal; 25 | font-style: normal; 26 | } 27 | 28 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 29 | 30 | // Override theme settings (see ../template/settings.scss) 31 | $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15); 32 | 33 | // Background generator 34 | @mixin bodyBackground() { 35 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 36 | } 37 | 38 | 39 | 40 | // Theme template ------------------------------ 41 | @import "../template/theme"; 42 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | /** 30 | * Solarized colors by Ethan Schoonover 31 | */ 32 | html * { 33 | color-profile: sRGB; 34 | rendering-intent: auto; 35 | } 36 | 37 | // Solarized colors 38 | $base03: #002b36; 39 | $base02: #073642; 40 | $base01: #586e75; 41 | $base00: #657b83; 42 | $base0: #839496; 43 | $base1: #93a1a1; 44 | $base2: #eee8d5; 45 | $base3: #fdf6e3; 46 | $yellow: #b58900; 47 | $orange: #cb4b16; 48 | $red: #dc322f; 49 | $magenta: #d33682; 50 | $violet: #6c71c4; 51 | $blue: #268bd2; 52 | $cyan: #2aa198; 53 | $green: #859900; 54 | 55 | // Override theme settings (see ../template/settings.scss) 56 | $mainColor: $base1; 57 | $headingColor: $base2; 58 | $headingTextShadow: none; 59 | $backgroundColor: $base03; 60 | $linkColor: $blue; 61 | $linkColorHover: lighten( $linkColor, 20% ); 62 | $selectionBackgroundColor: $magenta; 63 | 64 | 65 | 66 | // Theme template ------------------------------ 67 | @import "../template/theme"; 68 | // --------------------------------------------- 69 | -------------------------------------------------------------------------------- /slides/css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | $mainFontSize: 30px; 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is brown. 4 | * 5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. 6 | */ 7 | 8 | 9 | // Default mixins and settings ----------------- 10 | @import "../template/mixins"; 11 | @import "../template/settings"; 12 | // --------------------------------------------- 13 | 14 | 15 | 16 | // Override theme settings (see ../template/settings.scss) 17 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 18 | $mainColor: #000; 19 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 20 | $headingColor: #383D3D; 21 | $headingTextShadow: none; 22 | $headingTextTransform: none; 23 | $backgroundColor: #F0F1EB; 24 | $linkColor: #51483D; 25 | $linkColorHover: lighten( $linkColor, 20% ); 26 | $selectionBackgroundColor: #26351C; 27 | 28 | .reveal a:not(.image) { 29 | line-height: 1.3em; 30 | } 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- 36 | -------------------------------------------------------------------------------- /slides/css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | 35 | 36 | // Theme template ------------------------------ 37 | @import "../template/theme"; 38 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Fix links so they are not cut off 33 | .reveal a:not(.image) { 34 | line-height: 1.3em; 35 | } 36 | 37 | // Background generator 38 | @mixin bodyBackground() { 39 | @include radial-gradient( #add9e4, #f7fbfc ); 40 | } 41 | 42 | 43 | 44 | // Theme template ------------------------------ 45 | @import "../template/theme"; 46 | // --------------------------------------------- 47 | -------------------------------------------------------------------------------- /slides/css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @font-face { 16 | font-family: 'League Gothic'; 17 | src: url('../../lib/font/league_gothic-webfont.eot'); 18 | src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../lib/font/league_gothic-webfont.woff') format('woff'), 20 | url('../../lib/font/league_gothic-webfont.ttf') format('truetype'), 21 | url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 22 | 23 | font-weight: normal; 24 | font-style: normal; 25 | } 26 | 27 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 28 | 29 | 30 | /** 31 | * Solarized colors by Ethan Schoonover 32 | */ 33 | html * { 34 | color-profile: sRGB; 35 | rendering-intent: auto; 36 | } 37 | 38 | // Solarized colors 39 | $base03: #002b36; 40 | $base02: #073642; 41 | $base01: #586e75; 42 | $base00: #657b83; 43 | $base0: #839496; 44 | $base1: #93a1a1; 45 | $base2: #eee8d5; 46 | $base3: #fdf6e3; 47 | $yellow: #b58900; 48 | $orange: #cb4b16; 49 | $red: #dc322f; 50 | $magenta: #d33682; 51 | $violet: #6c71c4; 52 | $blue: #268bd2; 53 | $cyan: #2aa198; 54 | $green: #859900; 55 | 56 | // Override theme settings (see ../template/settings.scss) 57 | $mainColor: $base00; 58 | $headingColor: $base01; 59 | $headingTextShadow: none; 60 | $backgroundColor: $base3; 61 | $linkColor: $blue; 62 | $linkColorHover: lighten( $linkColor, 20% ); 63 | $selectionBackgroundColor: $magenta; 64 | 65 | // Background generator 66 | // @mixin bodyBackground() { 67 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 68 | // } 69 | 70 | 71 | 72 | // Theme template ------------------------------ 73 | @import "../template/theme"; 74 | // --------------------------------------------- 75 | -------------------------------------------------------------------------------- /slides/css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /slides/css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 36px; 10 | $mainColor: #eee; 11 | 12 | // Headings 13 | $headingMargin: 0 0 20px 0; 14 | $headingFont: 'League Gothic', Impact, sans-serif; 15 | $headingColor: #eee; 16 | $headingLineHeight: 0.9em; 17 | $headingLetterSpacing: 0.02em; 18 | $headingTextTransform: uppercase; 19 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 20 | $heading1TextShadow: $headingTextShadow; 21 | 22 | // Links and actions 23 | $linkColor: #13DAEC; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | 26 | // Text selection 27 | $selectionBackgroundColor: #FF5E99; 28 | $selectionColor: #fff; 29 | 30 | // Generates the presentation background, can be overridden 31 | // to return a background image or gradient 32 | @mixin bodyBackground() { 33 | background: $backgroundColor; 34 | } -------------------------------------------------------------------------------- /slides/css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | body { 8 | @include bodyBackground(); 9 | background-color: $backgroundColor; 10 | } 11 | 12 | .reveal { 13 | font-family: $mainFont; 14 | font-size: $mainFontSize; 15 | font-weight: normal; 16 | letter-spacing: -0.02em; 17 | color: $mainColor; 18 | } 19 | 20 | ::selection { 21 | color: $selectionColor; 22 | background: $selectionBackgroundColor; 23 | text-shadow: none; 24 | } 25 | 26 | /********************************************* 27 | * HEADERS 28 | *********************************************/ 29 | 30 | .reveal h1, 31 | .reveal h2, 32 | .reveal h3, 33 | .reveal h4, 34 | .reveal h5, 35 | .reveal h6 { 36 | margin: $headingMargin; 37 | color: $headingColor; 38 | 39 | font-family: $headingFont; 40 | line-height: $headingLineHeight; 41 | letter-spacing: $headingLetterSpacing; 42 | 43 | text-transform: $headingTextTransform; 44 | text-shadow: $headingTextShadow; 45 | } 46 | 47 | .reveal h1 { 48 | text-shadow: $heading1TextShadow; 49 | } 50 | 51 | 52 | /********************************************* 53 | * LINKS 54 | *********************************************/ 55 | 56 | .reveal a:not(.image) { 57 | color: $linkColor; 58 | text-decoration: none; 59 | 60 | -webkit-transition: color .15s ease; 61 | -moz-transition: color .15s ease; 62 | -ms-transition: color .15s ease; 63 | -o-transition: color .15s ease; 64 | transition: color .15s ease; 65 | } 66 | .reveal a:not(.image):hover { 67 | color: $linkColorHover; 68 | 69 | text-shadow: none; 70 | border: none; 71 | } 72 | 73 | .reveal .roll span:after { 74 | color: #fff; 75 | background: darken( $linkColor, 15% ); 76 | } 77 | 78 | 79 | /********************************************* 80 | * IMAGES 81 | *********************************************/ 82 | 83 | .reveal section img { 84 | margin: 15px 0px; 85 | background: rgba(255,255,255,0.12); 86 | border: 4px solid $mainColor; 87 | 88 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 89 | 90 | -webkit-transition: all .2s linear; 91 | -moz-transition: all .2s linear; 92 | -ms-transition: all .2s linear; 93 | -o-transition: all .2s linear; 94 | transition: all .2s linear; 95 | } 96 | 97 | .reveal a:hover img { 98 | background: rgba(255,255,255,0.2); 99 | border-color: $linkColor; 100 | 101 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 102 | } 103 | 104 | 105 | /********************************************* 106 | * NAVIGATION CONTROLS 107 | *********************************************/ 108 | 109 | .reveal .controls div.navigate-left, 110 | .reveal .controls div.navigate-left.enabled { 111 | border-right-color: $linkColor; 112 | } 113 | 114 | .reveal .controls div.navigate-right, 115 | .reveal .controls div.navigate-right.enabled { 116 | border-left-color: $linkColor; 117 | } 118 | 119 | .reveal .controls div.navigate-up, 120 | .reveal .controls div.navigate-up.enabled { 121 | border-bottom-color: $linkColor; 122 | } 123 | 124 | .reveal .controls div.navigate-down, 125 | .reveal .controls div.navigate-down.enabled { 126 | border-top-color: $linkColor; 127 | } 128 | 129 | .reveal .controls div.navigate-left.enabled:hover { 130 | border-right-color: $linkColorHover; 131 | } 132 | 133 | .reveal .controls div.navigate-right.enabled:hover { 134 | border-left-color: $linkColorHover; 135 | } 136 | 137 | .reveal .controls div.navigate-up.enabled:hover { 138 | border-bottom-color: $linkColorHover; 139 | } 140 | 141 | .reveal .controls div.navigate-down.enabled:hover { 142 | border-top-color: $linkColorHover; 143 | } 144 | 145 | 146 | /********************************************* 147 | * PROGRESS BAR 148 | *********************************************/ 149 | 150 | .reveal .progress { 151 | background: rgba(0,0,0,0.2); 152 | } 153 | .reveal .progress span { 154 | background: $linkColor; 155 | 156 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 157 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 158 | -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 159 | -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 160 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 161 | } 162 | 163 | /********************************************* 164 | * SLIDE NUMBER 165 | *********************************************/ 166 | .reveal .slide-number { 167 | color: $linkColor; 168 | } 169 | 170 | 171 | -------------------------------------------------------------------------------- /slides/demos/AI-editor/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: auto; 3 | } 4 | 5 | h2 { 6 | color: #777; 7 | } 8 | 9 | *{ 10 | -webkit-touch-callout: none; 11 | -webkit-user-select: none; 12 | -khtml-user-select: none; 13 | -moz-user-select: none; 14 | -ms-user-select: none; 15 | user-select: none; 16 | } 17 | 18 | .axis .domain{ 19 | fill: none; 20 | stroke-width: 1; 21 | stroke: #333; 22 | } 23 | 24 | .axis text{ 25 | font-size: 10px; 26 | fill: #000; 27 | opacity: 0.5; 28 | } 29 | 30 | .panel{ 31 | width: 900px; 32 | margin: auto; 33 | } 34 | 35 | .player{ 36 | display: block; 37 | /*clear: both;*/ 38 | } 39 | 40 | .player .fields{ 41 | float: left; 42 | } 43 | 44 | .player radar-chart{ 45 | width: 100%; 46 | height: 400px; 47 | /*background-color: blue;*/ 48 | overflow: hidden; 49 | display: block; 50 | } 51 | 52 | radar-chart .nob{ 53 | display: none; 54 | fill: #eee; 55 | stroke: #666; 56 | opacity: 0.8; 57 | } 58 | 59 | radar-chart svg:hover .nob{ 60 | display: inherit; 61 | } 62 | 63 | .averages radar-chart svg:hover .nob{ 64 | display: none; 65 | } 66 | 67 | radar-chart svg .area{ 68 | fill: #FF5704; 69 | opacity: 0.7; 70 | } 71 | 72 | .averages radar-chart .area{ 73 | fill: #FF5704; 74 | opacity: 0.9; 75 | } 76 | 77 | radar-chart .label{ 78 | font-size: 1.2em; 79 | font-weight: inherit; 80 | fill: #777; 81 | } 82 | 83 | radar-chart .tick text{ 84 | font-size: 1.2em; 85 | } -------------------------------------------------------------------------------- /slides/demos/AI-editor/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/AI-editor/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /slides/demos/AI-editor/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/AI-editor/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /slides/demos/AI-editor/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/AI-editor/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /slides/demos/AI-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AI Editor 5 | 7 | 8 | 9 | 10 | 11 |
12 |

AI Character Creator

13 |
14 |
15 |

Attributes

16 | 21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 36 | 39 | 42 | 48 | 49 |
nameminmax
34 | 35 | 37 | 38 | 40 | 41 | 43 | 47 |
50 |
51 |
52 |
53 |

Average attributes

54 |
55 | 56 |
57 |
58 |
59 |
60 |
61 |

AI character types

62 | 63 |
64 |
65 |
66 |
67 | 71 | 72 | 73 |
74 |
75 | 76 |
77 |
78 |
79 |
80 |
81 | 83 | 84 |
85 |
86 |
87 |
88 |
89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module('myApp', ['ngRoute']); 2 | 3 | // this should be in a factory and not global but we'll leave it like this to 4 | // keep the example simple. 5 | var data = [ 6 | { label: 'Sarah', value: 10 }, 7 | { label: 'Victor', value: 20 } 8 | ]; 9 | 10 | app.controller('MainCtrl', function($scope, $location){ 11 | $scope.data = data; 12 | // so that our directive can know how to access the values from our data. 13 | $scope.accessor = function(d){ return d.value }; 14 | $scope.done = function(){ $location.path('/'); }; 15 | $scope.add = function(){ 16 | $scope.data.push({ label: 'Victor', value: 100 }) 17 | }; 18 | $scope.remove = function(datum){ 19 | $scope.data.splice(this.$index, 1); 20 | }; 21 | $scope.edit = function(){ $location.path('/edit'); }; 22 | $scope.live = function(){ $location.path('/live'); }; 23 | }); 24 | 25 | app.config(function($routeProvider){ 26 | $routeProvider 27 | .when('/', { 28 | controller: 'MainCtrl', 29 | templateUrl: 'graph.html' 30 | }) 31 | .when('/edit', { 32 | controller: 'MainCtrl', 33 | templateUrl: 'edit.html' 34 | }) 35 | .when('/live', { 36 | controller: 'MainCtrl', 37 | templateUrl: 'live.html' 38 | }) 39 | .otherwise({ redirectTo: '/' }) 40 | }); -------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/donut-chart.directive.js: -------------------------------------------------------------------------------- 1 | app.directive('donutChart', function() { 2 | 3 | return { 4 | scope: { // isolate scope 5 | 'data': '=', 6 | 'onClick': '&', 7 | 'accessor': '=' 8 | }, 9 | restrict: 'E', 10 | link: link 11 | }; 12 | 13 | function link(scope, element) { 14 | // the d3 bits 15 | console.log('scope.data', scope.data); 16 | var color = d3.scale.category10(); 17 | var el = element[0]; 18 | var width = el.clientWidth; 19 | var height = el.clientHeight; 20 | var min = Math.min(width, height); 21 | var accessor = scope.accessor || Number; 22 | var pie = d3.layout.pie().sort(null).value(accessor); 23 | var arc = d3.svg.arc() 24 | .outerRadius(min / 2 * 0.9) 25 | .innerRadius(min / 2 * 0.5); 26 | 27 | var svg = d3.select(el).append('svg') 28 | .attr({width: width, height: height}) 29 | .append('g') 30 | .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); 31 | 32 | svg.on('mousedown', function(d) { 33 | // yo angular, the code in this callback might make a change to the scope! 34 | // so be sure to apply $watch's and catch errors. 35 | scope.$apply(function(){ 36 | if(scope.onClick) scope.onClick(); 37 | }); 38 | }); 39 | 40 | function arcTween(a) { 41 | // see: http://bl.ocks.org/mbostock/1346410 42 | var i = d3.interpolate(this._current, a); 43 | this._current = i(0); 44 | return function(t) { 45 | return arc(i(t)); 46 | }; 47 | } 48 | 49 | // add the s for each arc slice 50 | var arcs = svg.selectAll('path.arc').data(pie(scope.data)) 51 | .enter().append('path') 52 | .attr('class', 'arc') 53 | .style('stroke', 'white') 54 | .attr('fill', function(d, i) { return color(i) }) 55 | // store the initial angles 56 | .each(function(d) { return this._current = d }); 57 | 58 | // our data changed! update the arcs, adding, updating, or removing 59 | // elements as needed 60 | scope.$watch('data', function(newData, oldData){ 61 | console.log('data changed!'); 62 | var data = newData.slice(0); // copy 63 | var duration = 500; 64 | var PI = Math.PI; 65 | while(data.length < oldData.length) data.push(0); 66 | arcs = svg.selectAll('.arc').data(pie(data)); 67 | arcs.transition().duration(duration).attrTween('d', arcTween); 68 | // transition in any new slices 69 | arcs.enter().append('path') 70 | .style('stroke', 'white') 71 | .attr('class', 'arc') 72 | .attr('fill', function(d, i){ return color(i) }) 73 | .each(function(d) { 74 | this._current = { startAngle: 2 * PI - 0.001, endAngle: 2 * PI } 75 | }) 76 | .transition().duration(duration).attrTween('d', arcTween); 77 | // transition out any slices with size = 0 78 | arcs.filter(function(d){ return d.data === 0 }) 79 | .transition() 80 | .duration(duration) 81 | .each(function(d){ d.startAngle = 2 * PI - 0.001; d.endAngle = 2 * PI; }) 82 | .attrTween('d', arcTween).remove(); 83 | // IMPORTANT! the third argument, `true`, tells angular to watch for 84 | // changes to array elements. 85 | }, true); 86 | } 87 | }); 88 | 89 | app.controller('MainController', function($scope){ 90 | // controller "knows" nothing about donut charts 91 | $scope.shared = { data: [1] }; 92 | $scope.chartClicked = function(){ 93 | var n = Math.round(Math.random() * 9) + 1; 94 | $scope.shared.data = d3.range(n).map(function(d){ return Math.random(); }); 95 | } 96 | }); -------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/edit.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 |
-------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/graph.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
-------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/live.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 |
-------------------------------------------------------------------------------- /slides/demos/a-donut-chart-editor/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | donut-chart{ 4 | width: 100%; 5 | top: 20%; 6 | height: 80%; 7 | position: absolute; 8 | pointer-events: none; 9 | } 10 | .controls{ 11 | float: right; 12 | text-align: right; 13 | } 14 | 15 | * { 16 | -webkit-box-sizing: border-box; 17 | box-sizing: border-box; 18 | -webkit-appearance: none; 19 | -webkit-user-select: none; 20 | user-select: none; 21 | outline: none; 22 | } 23 | 24 | /* 25 | * just some select styles from: http://designmodo.github.io/Flat-UI/ 26 | */ 27 | 28 | body{ 29 | font-family: "Lato", Helvetica, Arial, sans-serif; 30 | } 31 | 32 | button{ 33 | border: none; 34 | border-radius: 6px; 35 | line-height: 1.471; 36 | padding: 10px 19px; 37 | color: #ffffff; 38 | background-color: #1abc9c; 39 | font-size: 17px; 40 | -webkit-font-smoothing: subpixel-antialiased; 41 | -webkit-transition: 0.25s linear; 42 | transition: 0.25s linear; 43 | } 44 | 45 | button:hover{ 46 | color: #ffffff; 47 | background-color: #48c9b0; 48 | } 49 | 50 | input{ 51 | border: 2px solid #bdc3c7; 52 | color: #34495e; 53 | font-size: 15px; 54 | padding: 8px 12px; 55 | height: 42px; 56 | -webkit-appearance: none; 57 | border-radius: 6px; 58 | -webkit-box-shadow: none; 59 | box-shadow: none; 60 | -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; 61 | transition: border .25s linear, color .25s linear, background-color .25s linear; 62 | } -------------------------------------------------------------------------------- /slides/demos/arch-angels/Church_Heart_of_the_Andes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/arch-angels/Church_Heart_of_the_Andes.jpg -------------------------------------------------------------------------------- /slides/demos/arch-angels/angel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/arch-angels/angel.png -------------------------------------------------------------------------------- /slides/demos/arch-angels/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 17 | 18 | 45 | 46 | -------------------------------------------------------------------------------- /slides/demos/d3-intro/div-bar-chart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | 31 | 32 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0.1-d3-layout.pie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | 18 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0.2-d3-layout.pie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | 18 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0.5-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 34 | 35 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0.5.1-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 36 | 37 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v0.5.2-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 36 | 37 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v1-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v1.1-directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v2-sharing-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v2.1-sharing-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v3-updating-data.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 18 | 19 |
20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v3.1-updating-data.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v4-updating-shared-data-with-watch-and-apply.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v4.1-updating-shared-data-with-watch-and-apply.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 |
18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v5-ng-repeat-and-scope-inheritance-part1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v6-ng-repeat-and-scope-inheritance-part2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v7-animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v8-enter-and-exit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 |
17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /slides/demos/lets-make-a-donut-chart-directive/v9-using-a-controller-and-seperating-out-business-logic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /slides/demos/life-expectancy/12s0108.xls: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/life-expectancy/12s0108.xls -------------------------------------------------------------------------------- /slides/demos/life-expectancy/life-expectancy-by-sex-race-and-state.csv: -------------------------------------------------------------------------------- 1 | State,"Total 1979 - 1981","Total 1989 - 1991","Male Total 1989 - 1991","Male White 1989 - 1991","Male Black 1989 - 1991","Female Total 1989 - 1991","Female White 1989 - 1991","Female Black 1989 - 1991" 2 | Alabama,72.53,73.64,69.59,71.12,64.37,77.61,78.85,73.76 3 | Alaska,72.24,74.83,71.60,72.82,(B),78.60,79.40,(B) 4 | Arizona,74.30,76.10,72.66,73.04,67.20,79.58,79.84,74.90 5 | Arkansas,73.72,74.33,70.54,71.54,64.03,78.13,78.89,73.58 6 | California,74.57,75.86,72.53,72.61,65.43,79.19,79.26,74.07 7 | Colorado,75.30,76.96,73.79,73.88,68.96,80.01,80.13,75.89 8 | Connecticut,75.12,76.91,73.62,74.25,66.04,79.97,80.37,75.44 9 | Delaware,73.21,74.76,71.63,72.75,65.51,77.74,78.62,72.91 10 | District of Columbia,69.20,67.99,61.97,71.36,57.53,74.23,81.06,71.61 11 | Florida,74.00,75.84,72.10,73.19,64.26,79.60,80.46,73.28 12 | Georgia,72.22,73.61,69.65,71.46,63.98,77.46,78.94,73.34 13 | Hawaii,77.02,78.21,75.37,75.12,(B),81.26,81.09,(B) 14 | Idaho,75.19,76.88,73.88,73.90,(B),79.93,79.93,(B) 15 | Illinois,73.37,74.90,71.34,72.83,62.41,78.31,79.33,72.39 16 | Indiana,73.84,75.39,71.99,72.44,65.87,78.62,79.03,73.56 17 | Iowa,75.81,77.29,73.89,73.98,(B),80.54,80.62,(B) 18 | Kansas,75.31,76.76,73.40,73.72,67.48,79.99,80.25,75.04 19 | Kentucky,73.06,74.37,70.72,71.01,66.06,77.97,78.24,74.13 20 | Louisiana,71.74,73.05,69.10,71.15,63.84,76.93,78.54,73.16 21 | Maine,74.59,76.35,72.98,72.98,(B),79.61,79.61,(B) 22 | Maryland,73.32,74.79,71.31,73.20,64.99,78.13,79.23,74.31 23 | Massachusetts,75.01,76.72,73.32,73.54,68.17,79.80,79.95,76.50 24 | Michigan,73.67,75.04,71.71,73.06,63.68,78.24,79.14,73.18 25 | Minnesota,76.15,77.76,74.53,74.78,(B),80.85,81.02,(B) 26 | Mississippi,71.98,73.03,68.90,70.74,64.66,77.10,78.82,73.82 27 | Missouri,73.84,75.25,71.54,72.43,63.87,78.82,79.48,73.52 28 | Montana,73.93,76.23,73.05,73.59,(B),79.49,79.92,(B) 29 | Nebraska,75.49,76.92,73.57,73.87,(B),80.17,80.44,(B) 30 | Nevada,72.64,74.18,70.96,71.26,(B),77.76,77.99,(B) 31 | New Hampshire,74.98,76.72,73.52,73.48,(B),79.77,79.74,(B) 32 | New Jersey,74.00,75.42,72.16,73.37,63.87,78.49,79.34,72.88 33 | New Mexico,74.01,75.74,72.20,72.66,(B),79.33,79.53,(B) 34 | New York,73.70,74.68,70.86,72.01,63.86,78.32,79.03,74.35 35 | North Carolina,72.96,74.48,70.58,72.21,64.38,78.27,79.44,74.24 36 | North Dakota,75.71,77.62,74.35,74.74,(B),80.99,81.32,(B) 37 | Ohio,73.49,75.32,71.99,72.70,65.80,78.45,78.95,74.29 38 | Oklahoma,73.67,75.10,71.63,71.76,67.10,78.49,78.59,74.48 39 | Oregon,74.99,76.44,73.21,73.28,(B),79.67,79.73,(B) 40 | Pennsylvania,73.58,75.38,71.91,72.81,63.33,78.66,79.28,73.02 41 | Rhode Island,74.76,76.54,73.00,73.31,(B),79.77,79.97,(B) 42 | South Carolina,71.85,73.51,69.59,71.62,64.07,77.34,78.97,73.35 43 | South Dakota,74.97,76.91,73.17,74.30,(B),80.77,81.59,(B) 44 | Tennessee,73.30,74.32,70.38,71.38,64.41,78.18,79.10,73.24 45 | Texas,73.64,75.14,71.41,72.08,65.36,78.87,79.42,74.23 46 | Utah,75.76,77.70,74.93,75.00,(B),80.38,80.44,(B) 47 | Vermont,74.79,76.54,73.29,73.25,(B),79.68,79.65,(B) 48 | Virginia,73.43,75.22,71.77,73.04,65.75,78.56,79.48,74.37 49 | Washington,75.13,76.82,73.84,73.97,67.91,79.74,79.81,75.58 50 | West Virginia,72.84,74.26,70.53,70.66,65.00,77.93,78.02,74.36 51 | Wisconsin,75.35,76.87,73.61,73.99,66.42,80.03,80.27,75.27 52 | Wyoming,73.85,76.21,73.16,73.27,(B),79.29,79.46,(B) -------------------------------------------------------------------------------- /slides/demos/life-expectancy/style.css: -------------------------------------------------------------------------------- 1 | body, html{ 2 | margin: auto; 3 | width: 100%; 4 | height: 100%; 5 | font-family: Helvetica; 6 | } 7 | state-heatmap{ 8 | width: 400px; 9 | height: 240px; 10 | display: inline-block; 11 | } 12 | path { 13 | fill: none; 14 | stroke-linejoin: round; 15 | } 16 | .state { 17 | stroke: #333; 18 | fill: red; 19 | } 20 | .table{ 21 | display: table; 22 | width: 100%; 23 | height: 100%; 24 | } 25 | .row{ 26 | display: table-row; 27 | vertical-align: middle; 28 | } 29 | .cell{ 30 | display: table-cell; 31 | vertical-align: middle; 32 | text-align: center; 33 | } 34 | .cell:nth-child(1){ 35 | width: 6%; 36 | } 37 | .row:nth-child(1){ 38 | height: 4%; 39 | } 40 | .cell h1{ 41 | margin: 0; 42 | padding: 0; 43 | } 44 | .row.header{ 45 | width: 100%; 46 | text-align: center; 47 | background-color: blue; 48 | } 49 | .column-label{ 50 | height: 5%; 51 | } 52 | .row-label{ 53 | width: 5%; 54 | } 55 | .header{ 56 | width: 100%; 57 | text-align: center; 58 | } -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/arctween.snippet.js: -------------------------------------------------------------------------------- 1 | 2 | function arcTween(a) { 3 | // see: http://bl.ocks.org/mbostock/1346410 4 | var i = d3.interpolate(this._current, a); 5 | this._current = i(0); 6 | return function(t) { 7 | return arc(i(t)); 8 | }; 9 | } -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/enter-exit.snippet.js: -------------------------------------------------------------------------------- 1 | scope.$watch('data', function(data){ 2 | var duration = 1000 3 | arcs = arcs.data(pie(data)) 4 | arcs.transition() 5 | .duration(duration) 6 | .attrTween('d', arcTween) 7 | 8 | arcs.enter() 9 | .append('path') 10 | .style('stroke', 'white') 11 | .attr('fill', function(d, i){ return color(i) }) 12 | .each(function(d) { 13 | this._current = { startAngle: 2 * Math.PI - 0.001, endAngle: 2 * Math.PI } 14 | }) 15 | .transition() 16 | .duration(duration) 17 | .attrTween('d', arcTween) 18 | 19 | arcs.exit() 20 | .transition() 21 | .duration(duration) 22 | .each(function(d){ 23 | d.startAngle = 2 * Math.PI - 0.001; d.endAngle = 2 * Math.PI; 24 | }) 25 | .attrTween('d', arcTween).remove(); 26 | }) -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 123 | 124 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/mousedown.snippet.js: -------------------------------------------------------------------------------- 1 | svg.on('mousedown', function(){ 2 | scope.$apply(function(){ 3 | var num = Math.round(Math.random()* 10) + 1 4 | scope.data = d3.range(num).map(Math.random) 5 | }) 6 | }) -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 |
18 | 43 | 44 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 130 | 131 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | 22 | 23 | 24 | 113 | 114 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | 19 | 115 | 116 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | 21 | 128 | 129 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | 21 | 120 | 121 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-6-talk1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 121 | 122 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-7.talk2.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 126 | 127 | -------------------------------------------------------------------------------- /slides/demos/live-code-donut-chart/trial-8.talk2.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 123 | 124 | -------------------------------------------------------------------------------- /slides/demos/responsive/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/demos/responsive/app.js -------------------------------------------------------------------------------- /slides/demos/responsive/bar-chart.directive.js: -------------------------------------------------------------------------------- 1 | app.directive('barChart', function(){ 2 | return { 3 | template: '' 4 | , restrict: 'E' 5 | , scope: { data: '=', max: '=', min: '=' } 6 | , link: link 7 | } 8 | function link(scope, element, attrs){ 9 | var el = element[0] 10 | , width = el.clientWidth 11 | , height = el.clientHeight 12 | , svg 13 | , y = d3.scale.linear() 14 | , bars 15 | , max 16 | , min 17 | , barSpacing 18 | 19 | if(attrs.barWidth === undefined) attrs.barWidth = 'fill' 20 | 21 | svg = d3.select(element.find('svg')[0]) 22 | 23 | scope.$watch('data', update) 24 | 25 | scope.$watch(function(){ 26 | return el.clientWidth * el.clientHeight 27 | },function(){ 28 | width = el.clientWidth 29 | height = el.clientHeight 30 | resize() 31 | }) 32 | 33 | function resize(){ 34 | svg.attr({width: width, height: height}) 35 | barSpacing = width / scope.data.length 36 | y.range([height, 0]) 37 | var rect = bars.selectAll('g') 38 | .attr('transform', function(d, i){ 39 | return 'translate(' + i * barSpacing + ',0)' 40 | }).select('rect') 41 | .attr('y', function(d){ return y(d) }) 42 | // .attr('height', '1') 43 | .attr('height', function(d){ return height - y(d)}) 44 | if(attrs.barWidth === 'fill') 45 | rect.attr('width', barSpacing - 1) 46 | else rect.attr('width', attrs.barWidth) 47 | .attr('x', barSpacing / 2 - attrs.barWidth / 2) 48 | } 49 | 50 | function update(data, oldData){ 51 | if(scope.max === undefined) max = d3.max(data, function(d){ return d }) 52 | else max = scope.max 53 | if(scope.min === undefined) min = 0 54 | else min = scope.min 55 | console.log('min', min, 'max', max) 56 | y.domain([min, max]).range([height, 0]) 57 | barSpacing = width / data.length 58 | // no need to add new bars 59 | if(oldData && oldData !== data && data.length === oldData.length) return 60 | // re-add the bars 61 | bars = svg.append('g').attr('class', 'bars') 62 | var g = bars.selectAll('g').data(data) 63 | g.enter().append('g').attr('class', 'bar').append('rect') 64 | g.exit().remove() 65 | resize() 66 | } 67 | } 68 | }) -------------------------------------------------------------------------------- /slides/demos/responsive/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /slides/img/andrew-gelman-school-vouchers-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/andrew-gelman-school-vouchers-map.png -------------------------------------------------------------------------------- /slides/img/central-limit-theorem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/central-limit-theorem.png -------------------------------------------------------------------------------- /slides/img/d3-on-angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/d3-on-angular.png -------------------------------------------------------------------------------- /slides/img/donut-chart-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/donut-chart-1.png -------------------------------------------------------------------------------- /slides/img/hackreactor-logo-white-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/hackreactor-logo-white-bg.png -------------------------------------------------------------------------------- /slides/img/hackreactor-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/hackreactor-logo.png -------------------------------------------------------------------------------- /slides/img/hello-kitty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/hello-kitty.png -------------------------------------------------------------------------------- /slides/img/hp-spog-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/hp-spog-1.png -------------------------------------------------------------------------------- /slides/img/hp-spog-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/hp-spog-2.png -------------------------------------------------------------------------------- /slides/img/monsoonco-logo-black-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/monsoonco-logo-black-bg.png -------------------------------------------------------------------------------- /slides/img/monsoonco-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/monsoonco-logo.png -------------------------------------------------------------------------------- /slides/img/monty-hall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/monty-hall.png -------------------------------------------------------------------------------- /slides/img/paolo-de-matteis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/paolo-de-matteis.jpg -------------------------------------------------------------------------------- /slides/img/simpsons-paradox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/simpsons-paradox.png -------------------------------------------------------------------------------- /slides/img/small-multiples-with-ng-repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/small-multiples-with-ng-repeat.png -------------------------------------------------------------------------------- /slides/img/the-horse-in-motion.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/the-horse-in-motion.gif -------------------------------------------------------------------------------- /slides/img/the-horse-in-motion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/img/the-horse-in-motion.jpg -------------------------------------------------------------------------------- /slides/lib/css/twilight.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #141414; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .css .class, 17 | pre .css .id, 18 | pre .lisp .title, 19 | pre .nginx .title, 20 | pre .request, 21 | pre .status, 22 | pre .clojure .attribute { 23 | /*color: #E3CEAB;*/ 24 | /*color: #CDA869;*/ 25 | color: #cda869; 26 | } 27 | 28 | pre .django .template_tag, 29 | pre .django .variable, 30 | pre .django .filter .argument { 31 | color: #DCDCDC; 32 | } 33 | 34 | pre .number, 35 | pre .date { 36 | color: #cf6a4c; 37 | } 38 | 39 | pre .dos .envvar, 40 | pre .dos .stream, 41 | pre .variable, 42 | pre .apache .sqbracket { 43 | color: #EFDCBC; 44 | } 45 | 46 | pre .dos .flow, 47 | pre .diff .change, 48 | pre .python .exception, 49 | pre .python .built_in, 50 | pre .literal, 51 | pre .tex .special { 52 | color: #cf694d; 53 | } 54 | 55 | pre .diff .chunk, 56 | pre .subst { 57 | color: #8F8F8F; 58 | } 59 | 60 | pre .dos .keyword, 61 | pre .python .decorator, 62 | pre .title, 63 | pre .haskell .type, 64 | pre .diff .header, 65 | pre .ruby .class .parent, 66 | pre .apache .tag, 67 | pre .nginx .built_in, 68 | pre .tex .command, 69 | pre .prompt { 70 | color: #9B703F; 71 | } 72 | 73 | pre .dos .winutils, 74 | pre .ruby .symbol, 75 | pre .ruby .symbol .string, 76 | pre .ruby .string { 77 | color: #8F9D6A; 78 | } 79 | 80 | pre .diff .deletion, 81 | pre .string, 82 | pre .preprocessor, 83 | pre .built_in, 84 | pre .sql .aggregate, 85 | pre .javadoc, 86 | pre .smalltalk .class, 87 | pre .smalltalk .localvars, 88 | pre .smalltalk .array, 89 | pre .attr_selector, 90 | pre .pseudo, 91 | pre .apache .cbracket, 92 | pre .tex .formula { 93 | color: #8F9D6A; 94 | } 95 | 96 | pre .tag .value, pre .css .rules .value { 97 | color: #ca773f; 98 | } 99 | 100 | pre .shebang, 101 | pre .diff .addition, 102 | pre .comment, 103 | pre .java .annotation, 104 | pre .template_comment, 105 | pre .pi, 106 | pre .doctype { 107 | color: #7F9F7F; 108 | } 109 | 110 | pre .coffeescript .javascript, 111 | pre .javascript .xml, 112 | pre .tex .formula, 113 | pre .xml .javascript, 114 | pre .xml .vbscript, 115 | pre .xml .css, 116 | pre .xml .cdata { 117 | opacity: 0.5; 118 | } -------------------------------------------------------------------------------- /slides/lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; padding: 0.5em; 10 | background: #3F3F3F; 11 | color: #DCDCDC; 12 | } 13 | 14 | pre .keyword, 15 | pre .tag, 16 | pre .css .class, 17 | pre .css .id, 18 | pre .lisp .title, 19 | pre .nginx .title, 20 | pre .request, 21 | pre .status, 22 | pre .clojure .attribute { 23 | color: #E3CEAB; 24 | } 25 | 26 | pre .django .template_tag, 27 | pre .django .variable, 28 | pre .django .filter .argument { 29 | color: #DCDCDC; 30 | } 31 | 32 | pre .number, 33 | pre .date { 34 | color: #8CD0D3; 35 | } 36 | 37 | pre .dos .envvar, 38 | pre .dos .stream, 39 | pre .variable, 40 | pre .apache .sqbracket { 41 | color: #EFDCBC; 42 | } 43 | 44 | pre .dos .flow, 45 | pre .diff .change, 46 | pre .python .exception, 47 | pre .python .built_in, 48 | pre .literal, 49 | pre .tex .special { 50 | color: #EFEFAF; 51 | } 52 | 53 | pre .diff .chunk, 54 | pre .subst { 55 | color: #8F8F8F; 56 | } 57 | 58 | pre .dos .keyword, 59 | pre .python .decorator, 60 | pre .title, 61 | pre .haskell .type, 62 | pre .diff .header, 63 | pre .ruby .class .parent, 64 | pre .apache .tag, 65 | pre .nginx .built_in, 66 | pre .tex .command, 67 | pre .prompt { 68 | color: #efef8f; 69 | } 70 | 71 | pre .dos .winutils, 72 | pre .ruby .symbol, 73 | pre .ruby .symbol .string, 74 | pre .ruby .string { 75 | color: #DCA3A3; 76 | } 77 | 78 | pre .diff .deletion, 79 | pre .string, 80 | pre .tag .value, 81 | pre .preprocessor, 82 | pre .built_in, 83 | pre .sql .aggregate, 84 | pre .javadoc, 85 | pre .smalltalk .class, 86 | pre .smalltalk .localvars, 87 | pre .smalltalk .array, 88 | pre .css .rules .value, 89 | pre .attr_selector, 90 | pre .pseudo, 91 | pre .apache .cbracket, 92 | pre .tex .formula { 93 | color: #CC9393; 94 | } 95 | 96 | pre .shebang, 97 | pre .diff .addition, 98 | pre .comment, 99 | pre .java .annotation, 100 | pre .template_comment, 101 | pre .pi, 102 | pre .doctype { 103 | color: #7F9F7F; 104 | } 105 | 106 | pre .coffeescript .javascript, 107 | pre .javascript .xml, 108 | pre .tex .formula, 109 | pre .xml .javascript, 110 | pre .xml .vbscript, 111 | pre .xml .css, 112 | pre .xml .cdata { 113 | opacity: 0.5; 114 | } -------------------------------------------------------------------------------- /slides/lib/font/league_gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/lib/font/league_gothic-webfont.eot -------------------------------------------------------------------------------- /slides/lib/font/league_gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/lib/font/league_gothic-webfont.ttf -------------------------------------------------------------------------------- /slides/lib/font/league_gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/lib/font/league_gothic-webfont.woff -------------------------------------------------------------------------------- /slides/lib/font/league_gothic_license: -------------------------------------------------------------------------------- 1 | SIL Open Font License (OFL) 2 | http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | -------------------------------------------------------------------------------- /slides/lib/js/classList.js: -------------------------------------------------------------------------------- 1 | /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ 2 | if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p 3 | Copyright Tero Piirainen (tipiirai) 4 | License MIT / http://bit.ly/mit-license 5 | Version 0.96 6 | 7 | http://headjs.com 8 | */(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Markdown Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 |
26 | 36 |
37 | 38 | 39 |
40 | 54 |
55 | 56 | 57 |
58 | 69 |
70 | 71 | 72 |
73 | 77 |
78 | 79 | 80 |
81 | 86 |
87 | 88 | 89 |
90 | 100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /slides/plugin/markdown/example.md: -------------------------------------------------------------------------------- 1 | # Markdown Demo 2 | 3 | 4 | 5 | ## External 1.1 6 | 7 | Content 1.1 8 | 9 | Note: This will only appear in the speaker notes window. 10 | 11 | 12 | ## External 1.2 13 | 14 | Content 1.2 15 | 16 | 17 | 18 | ## External 2 19 | 20 | Content 2.1 21 | 22 | 23 | 24 | ## External 3.1 25 | 26 | Content 3.1 27 | 28 | 29 | ## External 3.2 30 | 31 | Content 3.2 32 | -------------------------------------------------------------------------------- /slides/plugin/math/math.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A plugin which enables rendering of math equations inside 3 | * of reveal.js slides. Essentially a thin wrapper for MathJax. 4 | * 5 | * @author Hakim El Hattab 6 | */ 7 | var RevealMath = window.RevealMath || (function(){ 8 | 9 | var options = Reveal.getConfig().math || {}; 10 | options.mathjax = options.mathjax || 'http://cdn.mathjax.org/mathjax/latest/MathJax.js'; 11 | options.config = options.config || 'TeX-AMS_HTML-full'; 12 | 13 | loadScript( options.mathjax + '?config=' + options.config, function() { 14 | 15 | MathJax.Hub.Config({ 16 | messageStyle: 'none', 17 | tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }, 18 | skipStartupTypeset: true 19 | }); 20 | 21 | // Typeset followed by an immediate reveal.js layout since 22 | // the typesetting process could affect slide height 23 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] ); 24 | MathJax.Hub.Queue( Reveal.layout ); 25 | 26 | // Reprocess equations in slides when they turn visible 27 | Reveal.addEventListener( 'slidechanged', function( event ) { 28 | 29 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); 30 | 31 | } ); 32 | 33 | } ); 34 | 35 | function loadScript( url, callback ) { 36 | 37 | var head = document.querySelector( 'head' ); 38 | var script = document.createElement( 'script' ); 39 | script.type = 'text/javascript'; 40 | script.src = url; 41 | 42 | // Wrapper for callback to make sure it only fires once 43 | var finish = function() { 44 | if( typeof callback === 'function' ) { 45 | callback.call(); 46 | callback = null; 47 | } 48 | } 49 | 50 | script.onload = finish; 51 | 52 | // IE 53 | script.onreadystatechange = function() { 54 | if ( this.readyState === 'loaded' ) { 55 | finish(); 56 | } 57 | } 58 | 59 | // Normal browsers 60 | head.appendChild( script ); 61 | 62 | } 63 | 64 | })(); 65 | -------------------------------------------------------------------------------- /slides/plugin/multiplex/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var multiplex = Reveal.getConfig().multiplex; 3 | var socketId = multiplex.id; 4 | var socket = io.connect(multiplex.url); 5 | 6 | socket.on(multiplex.id, function(data) { 7 | // ignore data from sockets that aren't ours 8 | if (data.socketId !== socketId) { return; } 9 | if( window.location.host === 'localhost:1947' ) return; 10 | 11 | Reveal.slide(data.indexh, data.indexv, data.indexf, 'remote'); 12 | }); 13 | }()); 14 | -------------------------------------------------------------------------------- /slides/plugin/multiplex/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var crypto = require('crypto'); 5 | 6 | var app = express.createServer(); 7 | var staticDir = express.static; 8 | 9 | io = io.listen(app); 10 | 11 | var opts = { 12 | port: 1948, 13 | baseDir : __dirname + '/../../' 14 | }; 15 | 16 | io.sockets.on('connection', function(socket) { 17 | socket.on('slidechanged', function(slideData) { 18 | if (typeof slideData.secret == 'undefined' || slideData.secret == null || slideData.secret === '') return; 19 | if (createHash(slideData.secret) === slideData.socketId) { 20 | slideData.secret = null; 21 | socket.broadcast.emit(slideData.socketId, slideData); 22 | }; 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | res.writeHead(200, {'Content-Type': 'text/html'}); 34 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 35 | }); 36 | 37 | app.get("/token", function(req,res) { 38 | var ts = new Date().getTime(); 39 | var rand = Math.floor(Math.random()*9999999); 40 | var secret = ts.toString() + rand.toString(); 41 | res.send({secret: secret, socketId: createHash(secret)}); 42 | }); 43 | 44 | var createHash = function(secret) { 45 | var cipher = crypto.createCipher('blowfish', secret); 46 | return(cipher.final('hex')); 47 | }; 48 | 49 | // Actually listen 50 | app.listen(opts.port || null); 51 | 52 | var brown = '\033[33m', 53 | green = '\033[32m', 54 | reset = '\033[0m'; 55 | 56 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /slides/plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // Don't emit events from inside of notes windows 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var multiplex = Reveal.getConfig().multiplex; 6 | 7 | var socket = io.connect(multiplex.url); 8 | 9 | var notify = function( slideElement, indexh, indexv, origin ) { 10 | if( typeof origin === 'undefined' && origin !== 'remote' ) { 11 | var nextindexh; 12 | var nextindexv; 13 | 14 | var fragmentindex = Reveal.getIndices().f; 15 | if (typeof fragmentindex == 'undefined') { 16 | fragmentindex = 0; 17 | } 18 | 19 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 20 | nextindexh = indexh; 21 | nextindexv = indexv + 1; 22 | } else { 23 | nextindexh = indexh + 1; 24 | nextindexv = 0; 25 | } 26 | 27 | var slideData = { 28 | indexh : indexh, 29 | indexv : indexv, 30 | indexf : fragmentindex, 31 | nextindexh : nextindexh, 32 | nextindexv : nextindexv, 33 | secret: multiplex.secret, 34 | socketId : multiplex.id 35 | }; 36 | 37 | socket.emit('slidechanged', slideData); 38 | } 39 | } 40 | 41 | Reveal.addEventListener( 'slidechanged', function( event ) { 42 | notify( event.currentSlide, event.indexh, event.indexv, event.origin ); 43 | } ); 44 | 45 | var fragmentNotify = function( event ) { 46 | notify( Reveal.getCurrentSlide(), Reveal.getIndices().h, Reveal.getIndices().v, event.origin ); 47 | }; 48 | 49 | Reveal.addEventListener( 'fragmentshown', fragmentNotify ); 50 | Reveal.addEventListener( 'fragmenthidden', fragmentNotify ); 51 | }()); -------------------------------------------------------------------------------- /slides/plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // don't emit events from inside the previews themselves 3 | if ( window.location.search.match( /receiver/gi ) ) { return; } 4 | 5 | var socket = io.connect(window.location.origin); 6 | var socketId = Math.random().toString().slice(2); 7 | 8 | console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId); 9 | window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId); 10 | 11 | // Fires when a fragment is shown 12 | Reveal.addEventListener( 'fragmentshown', function( event ) { 13 | var fragmentData = { 14 | fragment : 'next', 15 | socketId : socketId 16 | }; 17 | socket.emit('fragmentchanged', fragmentData); 18 | } ); 19 | 20 | // Fires when a fragment is hidden 21 | Reveal.addEventListener( 'fragmenthidden', function( event ) { 22 | var fragmentData = { 23 | fragment : 'previous', 24 | socketId : socketId 25 | }; 26 | socket.emit('fragmentchanged', fragmentData); 27 | } ); 28 | 29 | // Fires when slide is changed 30 | Reveal.addEventListener( 'slidechanged', function( event ) { 31 | var nextindexh; 32 | var nextindexv; 33 | var slideElement = event.currentSlide; 34 | 35 | if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { 36 | nextindexh = event.indexh; 37 | nextindexv = event.indexv + 1; 38 | } else { 39 | nextindexh = event.indexh + 1; 40 | nextindexv = 0; 41 | } 42 | 43 | var notes = slideElement.querySelector('aside.notes'); 44 | var slideData = { 45 | notes : notes ? notes.innerHTML : '', 46 | indexh : event.indexh, 47 | indexv : event.indexv, 48 | nextindexh : nextindexh, 49 | nextindexv : nextindexv, 50 | socketId : socketId, 51 | markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false 52 | 53 | }; 54 | 55 | socket.emit('slidechanged', slideData); 56 | } ); 57 | }()); 58 | -------------------------------------------------------------------------------- /slides/plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var fs = require('fs'); 3 | var io = require('socket.io'); 4 | var _ = require('underscore'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express.createServer(); 8 | var staticDir = express.static; 9 | 10 | io = io.listen(app); 11 | 12 | var opts = { 13 | port : 1947, 14 | baseDir : __dirname + '/../../' 15 | }; 16 | 17 | io.sockets.on('connection', function(socket) { 18 | socket.on('slidechanged', function(slideData) { 19 | socket.broadcast.emit('slidedata', slideData); 20 | }); 21 | socket.on('fragmentchanged', function(fragmentData) { 22 | socket.broadcast.emit('fragmentdata', fragmentData); 23 | }); 24 | }); 25 | 26 | app.configure(function() { 27 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) { 28 | app.use('/' + dir, staticDir(opts.baseDir + dir)); 29 | }); 30 | }); 31 | 32 | app.get("/", function(req, res) { 33 | res.writeHead(200, {'Content-Type': 'text/html'}); 34 | fs.createReadStream(opts.baseDir + '/index.html').pipe(res); 35 | }); 36 | 37 | app.get("/notes/:socketId", function(req, res) { 38 | 39 | fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) { 40 | res.send(Mustache.to_html(data.toString(), { 41 | socketId : req.params.socketId 42 | })); 43 | }); 44 | // fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res); 45 | }); 46 | 47 | // Actually listen 48 | app.listen(opts.port || null); 49 | 50 | var brown = '\033[33m', 51 | green = '\033[32m', 52 | reset = '\033[0m'; 53 | 54 | var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' ); 55 | 56 | console.log( brown + "reveal.js - Speaker Notes" + reset ); 57 | console.log( "1. Open the slides at " + green + slidesLocation + reset ); 58 | console.log( "2. Click on the link your JS console to go to the notes page" ); 59 | console.log( "3. Advance through your slides and your notes will advance automatically" ); 60 | -------------------------------------------------------------------------------- /slides/plugin/notes-server/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | reveal.js - Slide Notes 9 | 10 | 90 | 91 | 92 | 93 | 94 |
95 | 96 |
97 | 98 |
99 | 100 | UPCOMING: 101 |
102 |
103 | 104 | 105 | 106 | 107 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /slides/plugin/notes/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles opening of and synchronization with the reveal.js 3 | * notes window. 4 | */ 5 | var RevealNotes = (function() { 6 | 7 | function openNotes() { 8 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path 9 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path 10 | var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' ); 11 | 12 | // Fires when slide is changed 13 | Reveal.addEventListener( 'slidechanged', post ); 14 | 15 | // Fires when a fragment is shown 16 | Reveal.addEventListener( 'fragmentshown', post ); 17 | 18 | // Fires when a fragment is hidden 19 | Reveal.addEventListener( 'fragmenthidden', post ); 20 | 21 | /** 22 | * Posts the current slide data to the notes window 23 | */ 24 | function post() { 25 | var slideElement = Reveal.getCurrentSlide(), 26 | slideIndices = Reveal.getIndices(), 27 | messageData; 28 | 29 | var notes = slideElement.querySelector( 'aside.notes' ), 30 | nextindexh, 31 | nextindexv; 32 | 33 | if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) { 34 | nextindexh = slideIndices.h; 35 | nextindexv = slideIndices.v + 1; 36 | } else { 37 | nextindexh = slideIndices.h + 1; 38 | nextindexv = 0; 39 | } 40 | 41 | messageData = { 42 | notes : notes ? notes.innerHTML : '', 43 | indexh : slideIndices.h, 44 | indexv : slideIndices.v, 45 | indexf : slideIndices.f, 46 | nextindexh : nextindexh, 47 | nextindexv : nextindexv, 48 | markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false 49 | }; 50 | 51 | notesPopup.postMessage( JSON.stringify( messageData ), '*' ); 52 | } 53 | 54 | // Navigate to the current slide when the notes are loaded 55 | notesPopup.addEventListener( 'load', function( event ) { 56 | post(); 57 | }, false ); 58 | } 59 | 60 | // If the there's a 'notes' query set, open directly 61 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { 62 | openNotes(); 63 | } 64 | 65 | // Open the notes when the 's' key is hit 66 | document.addEventListener( 'keydown', function( event ) { 67 | // Disregard the event if the target is editable or a 68 | // modifier is present 69 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return; 70 | 71 | if( event.keyCode === 83 ) { 72 | event.preventDefault(); 73 | openNotes(); 74 | } 75 | }, false ); 76 | 77 | return { open: openNotes }; 78 | })(); 79 | -------------------------------------------------------------------------------- /slides/plugin/postmessage/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 | 12 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /slides/plugin/postmessage/postmessage.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | simple postmessage plugin 4 | 5 | Useful when a reveal slideshow is inside an iframe. 6 | It allows to call reveal methods from outside. 7 | 8 | Example: 9 | var reveal = window.frames[0]; 10 | 11 | // Reveal.prev(); 12 | reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*'); 13 | // Reveal.next(); 14 | reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*'); 15 | // Reveal.slide(2, 2); 16 | reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*'); 17 | 18 | Add to the slideshow: 19 | 20 | dependencies: [ 21 | ... 22 | { src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } } 23 | ] 24 | 25 | */ 26 | 27 | (function (){ 28 | 29 | window.addEventListener( "message", function ( event ) { 30 | var data = JSON.parse( event.data ), 31 | method = data.method, 32 | args = data.args; 33 | 34 | if( typeof Reveal[method] === 'function' ) { 35 | Reveal[method].apply( Reveal, data.args ); 36 | } 37 | }, false); 38 | 39 | }()); 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /slides/plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf 6 | * 7 | * By Manuel Bieh (https://github.com/manuelbieh) 8 | */ 9 | 10 | // html2pdf.js 11 | var page = new WebPage(); 12 | var system = require( 'system' ); 13 | 14 | page.viewportSize = { 15 | width: 1024, 16 | height: 768 17 | }; 18 | 19 | page.paperSize = { 20 | format: 'letter', 21 | orientation: 'landscape', 22 | margin: { 23 | left: '0', 24 | right: '0', 25 | top: '0', 26 | bottom: '0' 27 | } 28 | }; 29 | 30 | var revealFile = system.args[1] || 'index.html?print-pdf'; 31 | var slideFile = system.args[2] || 'slides.pdf'; 32 | 33 | if( slideFile.match( /\.pdf$/gi ) === null ) { 34 | slideFile += '.pdf'; 35 | } 36 | 37 | console.log( 'Printing PDF...' ); 38 | 39 | page.open( revealFile, function( status ) { 40 | console.log( 'Printed succesfully' ); 41 | page.render( slideFile ); 42 | phantom.exit(); 43 | } ); 44 | 45 | -------------------------------------------------------------------------------- /slides/plugin/remotes/remotes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Touch-based remote controller for your presentation courtesy 3 | * of the folks at http://remotes.io 4 | */ 5 | 6 | (function(window){ 7 | 8 | /** 9 | * Detects if we are dealing with a touch enabled device (with some false positives) 10 | * Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js 11 | */ 12 | var hasTouch = (function(){ 13 | return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch; 14 | })(); 15 | 16 | /** 17 | * Detects if notes are enable and the current page is opened inside an /iframe 18 | * this prevents loading Remotes.io several times 19 | */ 20 | var isNotesAndIframe = (function(){ 21 | return window.RevealNotes && !(self == top); 22 | })(); 23 | 24 | if(!hasTouch && !isNotesAndIframe){ 25 | head.ready( 'remotes.ne.min.js', function() { 26 | new Remotes("preview") 27 | .on("swipe-left", function(e){ Reveal.right(); }) 28 | .on("swipe-right", function(e){ Reveal.left(); }) 29 | .on("swipe-up", function(e){ Reveal.down(); }) 30 | .on("swipe-down", function(e){ Reveal.up(); }) 31 | .on("tap", function(e){ Reveal.next(); }) 32 | .on("zoom-out", function(e){ Reveal.toggleOverview(true); }) 33 | .on("zoom-in", function(e){ Reveal.toggleOverview(false); }) 34 | ; 35 | } ); 36 | 37 | head.js('https://hakim-static.s3.amazonaws.com/reveal-js/remotes.ne.min.js'); 38 | } 39 | })(window); -------------------------------------------------------------------------------- /slides/test/examples/assets/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/test/examples/assets/image1.png -------------------------------------------------------------------------------- /slides/test/examples/assets/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/angular-d3-talk/2976848ba151f367eba91ced7723c8b1faaf0cf1/slides/test/examples/assets/image2.png -------------------------------------------------------------------------------- /slides/test/examples/barebones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Barebones 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 |

Barebones Presentation

20 |

This example contains the bare minimum includes and markup required to run a reveal.js presentation.

21 |
22 | 23 |
24 |

No Theme

25 |

There's no theme included, so it will fall back on browser defaults.

26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /slides/test/examples/embedded-media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Embedded Media 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |

Embedded Media Test

23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 |

Empty Slide

31 |
32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /slides/test/examples/slide-backgrounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Slide Backgrounds 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |

data-background: #00ffff

23 |
24 | 25 |
26 |

data-background: #bb00bb

27 |
28 | 29 |
30 |
31 |

data-background: #ff0000

32 |
33 |
34 |

data-background: rgba(0, 0, 0, 0.2)

35 |
36 |
37 |

data-background: salmon

38 |
39 |
40 | 41 |
42 |
43 |

Background applied to stack

44 |
45 |
46 |

Background applied to stack

47 |
48 |
49 |

Background applied to slide inside of stack

50 |
51 |
52 | 53 |
54 |

Background image

55 |
56 | 57 |
58 |
59 |

Background image

60 |
61 |
62 |

Background image

63 |
64 |
65 | 66 |
67 |

Background image

68 | 
data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"
69 |
70 | 71 |
72 |

Same background twice (1/2)

73 |
74 |
75 |

Same background twice (2/2)

76 |
77 | 78 |
79 |
80 |

Same background twice vertical (1/2)

81 |
82 |
83 |

Same background twice vertical (2/2)

84 |
85 |
86 | 87 |
88 |

Same background from horizontal to vertical (1/3)

89 |
90 |
91 |
92 |

Same background from horizontal to vertical (2/3)

93 |
94 |
95 |

Same background from horizontal to vertical (3/3)

96 |
97 |
98 | 99 |
100 | 101 |
102 | 103 | 104 | 105 | 106 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /slides/test/test-markdown-element-attributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown Element Attributes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /slides/test/test-markdown-element-attributes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' ); 9 | }); 10 | 11 | 12 | test( 'Attributes on element header in vertical slides', function() { 13 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' ); 14 | strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' ); 15 | }); 16 | 17 | test( 'Attributes on element paragraphs in vertical slides', function() { 18 | strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' ); 19 | }); 20 | 21 | test( 'Attributes on element list items in vertical slides', function() { 22 | strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.roll-in' ).length, 3, 'found a vertical slide with three list items with class fragment.roll-in' ); 23 | }); 24 | 25 | test( 'Attributes on element paragraphs in horizontal slides', function() { 26 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' ); 27 | }); 28 | test( 'Attributes on element list items in horizontal slides', function() { 29 | strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' ); 30 | }); 31 | test( 'Attributes on element list items in horizontal slides', function() { 32 | strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' ); 33 | }); 34 | 35 | test( 'Attributes on elements in vertical slides with default element attribute separator', function() { 36 | strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' ); 37 | }); 38 | 39 | test( 'Attributes on elements in single slides with default element attribute separator', function() { 40 | strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' ); 41 | }); 42 | 43 | } ); 44 | 45 | Reveal.initialize(); 46 | 47 | -------------------------------------------------------------------------------- /slides/test/test-markdown-slide-attributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown Attributes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /slides/test/test-markdown-slide-attributes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' ); 9 | }); 10 | 11 | test( 'Id on slide', function() { 12 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' ); 13 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' ); 14 | }); 15 | 16 | test( 'data-background attributes', function() { 17 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); 18 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); 19 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); 20 | }); 21 | 22 | test( 'data-transition attributes', function() { 23 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); 24 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); 25 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' ); 26 | }); 27 | 28 | test( 'data-background attributes with default separator', function() { 29 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); 30 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); 31 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); 32 | }); 33 | 34 | test( 'data-transition attributes with default separator', function() { 35 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); 36 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); 37 | strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' ); 38 | }); 39 | 40 | test( 'data-transition attributes with inline content', function() { 41 | strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' ); 42 | }); 43 | 44 | } ); 45 | 46 | Reveal.initialize(); 47 | 48 | -------------------------------------------------------------------------------- /slides/test/test-markdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Test Markdown 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /slides/test/test-markdown.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Reveal.addEventListener( 'ready', function() { 4 | 5 | QUnit.module( 'Markdown' ); 6 | 7 | test( 'Vertical separator', function() { 8 | strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' ); 9 | }); 10 | 11 | 12 | } ); 13 | 14 | Reveal.initialize(); 15 | 16 | -------------------------------------------------------------------------------- /slides/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | reveal.js - Tests 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /talk.sh: -------------------------------------------------------------------------------- 1 | /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ 2 | --force-app-mode \ 3 | --user-data-dir=$HOME/.tmp/chrome-app-mode/ \ 4 | --app=http://talk:8080/ & 5 | http-server slides -p 8080 --------------------------------------------------------------------------------