A presentation about this presentation.

CScott Brown

The Agenda

  • Browser Presentations
  • Interactive Examples
  • State of Libraries for Doing This Stuff

Browser Presentations

This looks just like powerpoint.... Why go through the effort?

Cons:

  • Have to learn HTML/CSS/JS
  • Webhosting
  • Layout is harder
  • Resolution robustness is harder
  • Wait, did you say I need to learn HTML/CSS/JS?

Pro:

  • Interactivity!
    • Extensible
    • Portable

Some Examples

Trigonometry

The sine of the angle formed by a point $(x,y)$ on the unit circle, the origin, and $(1,0)$ is equal to $y$.

Trigonometry

Mean Shift

  • Find the stationary points of the locally weighted mean of some data
    • $$ q=\frac{\sum x K(x,q)}{\sum K(x,q)} $$

Mean Shift

Kernel Density (Gaussian Kernel)

$$\scriptsize {\rm I\!P}(\mathbf{q}) = \sum_{\mathbf{x} \in X} K_h(\mathbf{q},\mathbf{x}) $$
$$\scriptsize {\rm I\!P}(\mathbf{q}) = \sum_{\mathbf{x} \in X} e^{ -\frac{1}{2}\left(\frac{||\mathbf{x} - \mathbf{q}||}{h}\right)^2} $$
$$\scriptsize \frac{\partial{\rm I\!P}}{\partial \mathbf{q}} = \sum_{\mathbf{x} \in X} K_h(\mathbf{q}, \mathbf{x}) \frac{\partial}{\partial \mathbf{q}} \frac{-1}{2}\left(\frac{||\mathbf{x}-\mathbf{q}||}{h} \right)^2$$
$$\scriptsize ||\mathbf{x} - \mathbf{q}||^2 = \mathbf{x}^T\mathbf{x} - 2\mathbf{x}^T\mathbf{q} + \mathbf{q}^T\mathbf{q} $$
$$\scriptsize \frac{\partial{\rm I\!P}}{\partial \mathbf{q}} = \frac{1}{h^2} \sum_{\mathbf{x} \in X} K_h(\mathbf{q}, \mathbf{x}) (\mathbf{x} - \mathbf{q}) $$

Kernel Density (Gaussian Kernel)

$$\scriptsize \frac{\partial{\rm I\!P}}{\partial \mathbf{q}} = \frac{1}{h^2} \sum_{\mathbf{x} \in X} K_h(\mathbf{q}, \mathbf{x}) (\mathbf{x} - \mathbf{q}) $$
$$\scriptsize \frac{\sum_{\mathbf{x} \in X} \mathbf{x} K_h(\mathbf{q},\mathbf{x})} {\sum_{\mathbf{x} \in X} K_h(\mathbf{q},\mathbf{x})} = \mathbf{q} + \frac{\partial{\rm I\!P}}{\partial \mathbf{q}} \frac{h^2}{\sum_{\mathbf{x} \in X} K_h(\mathbf{q},\mathbf{x})} $$

Mean Shift == Gradient Ascent on the Kernel Density Function!

Kernel Density

$${\rm I\!P}(\mathbf{q}) = \sum_{\mathbf{x} \in X} K_h(\mathbf{q},\mathbf{x})$$
Thanks to NPashaP for these game of life codez

Supporting JS Libraries for Interactive Presentations

RevealJS

  1. Helps make a "powerpoint"-y layout
  2. There's a dozen others
  3. Not much to see here

MathJax

  1. Renders LaTeX equations $$ e^{i \pi} + 1 = 0 $$
  2. Incredibly Heavy or...
  3. Internet connection

D3

  1. D3 = "Data Driven Documents"
  2. Specifically designed for making pretty pictures from data
  3. 2D
  4. Low-level

Three.js

  1. WebGL 3D/2D on the local GPU
  2. WebGL is extremely low-level
  3. Three.js is medium-level
  4. Three.js has lots of interative freebies

Math.js

  1. Vector math
  2. Symbolic math

Sum up

  1. Pretty Browser-based Math presentations are easier than ever before
  2. ...But they're not that easy
  3. ...But there's infinite opportunity!
  4. https://github.com/csbrown/presentationpresentation