Math + SVG

Below come two examples of embedding SVG with math typeset on-the-fly with MathJax.

Native Reveal.js fragments are supported independently of MathJax

One side effect of using the custom Math plugin is the shorthands fragidx-<N> that you can use instead of fragment+data-fragment-index

• one
• three
• two
• one
• three

Try the following keys:

• Ctrl+LeftClick+Drag to draw freely
• While in drawing mode you can choose color from the menu at the bottom of the page.
• = to insert math (LaTeX) at the current mouse position or modify currently selected math
• Shift+LeftClick+Drag to erase elements
• Click+Drag to select/move elements
• Del to remove selected elements

Available keys (contd.):

• q to show/hide canvas
• - to clear canvas
• Alt+LeftClick or x to show spotlight
• z to save the current canvas content as SVG or current/all slides as json that you can preload onto the slides in future talks or in different slide decks.

This is a slide with content saved from one of the previous presentations.

Note that you can still click the $e=m{c}^2$ math formula and press = or just double-click the formula to change it.

Embed Altair (Vega-Lite) diagrams

A NetworkX graph visualized with nx_altair and displayed using Vega-Embed, pan/zoom with mouse.

Embed Altair (Vega-Lite) diagrams

An interactive line chart from Altair Gallery.

Embed Altair (Vega-Lite) diagrams

Another Altair example. Brush (click+drag) the left chart and/or click the legend on the right.

Embed Apache ECharts

3D plots using Apache ECharts. Interact using mouse.

Embed Apache ECharts

Embed Apache ECharts

The external file contains the following:

<div style="color:red">example</div>

Note that styles can be optionally inherited from the container when loaded using data-outer-html.

Content generation and actions

Below are examples of actions

The content below is generated by a javascript function. The function may return a text, an HTML string, a DOM node, or an array of DOM nodes.

(Click on the digits above!)

This list items are assigned fragment class automatically:

• One
• Two
• Three
• Four

Embedding a single page of a PDF file

Embedding multiple pages of a PDF file (scrollable)

Embedding multiple pages of a PDF file (as fragments)

This code is loaded with data-inner-text="..."

You can edit this code. Just click on it.

from pprint import pprint

if __name__ == '__main__':
    x = int(input("Input a number"))
    pprint(abs(x))

After editing press ESC to exit editing mode without saving or Ctrl+Enter to save.

The code below is run at the beginning of the slideshow and the result is displayed in a separate fragment (press Space to show the fragment). You can edit the code and press Ctrl+Enter to recompute the result.

a = {1, 2, 3}
b = {'a', 'b', 2}
a & b

PythonError: TypeError: eval_code() got an unexpected keyword argument 'stdout'

# We have an error here:
for i in range(5, -1, -1):
    print(1.0 / i)

The error message is output onto the next slide. You can also edit and rerun this piece of code.

PythonError: TypeError: eval_code() got an unexpected keyword argument 'stdout'

You can reserve several lines of code for the in-class coding:

'We need some space reserved for in-class coding here.'

TODO as a list:

• Try reveal.js
• If satisfied, use with profit.
• If not, drop it.

TODO as a mermaid diagram:

initially /* What to do before animation starts */
    apply color='red' to li[0,1]  /* Apply any CSS property */
    apply color='teal' to li.special /* Use CSS selectors */
next  /* Use "next" to define what is to be done on the next fragment */
    hide li[2] during 500ms  /* Set duration of the animation */
    then  /* If need to do several things, use "then" */
    show li[2] during 500ms delay 1000ms
    then
    apply 'font-size'='16pt' to li[2] during 1000ms
next
    apply 'font-size'='16pt' to li[0]
next
    execute """console.log("Done!")"""
next
    reset
    

• One
• Two
• Three
• Four