Introduction to Vizzy Plugin

Welcome to the Vizzy Plugin tutorial. This plugin allows embedding and interacting with iframes in Reveal.js presentations.

Basic Vizzy Element

This slide includes a basic vizzy element.


<vizzy data-src="lib/viz/collision-detection.html" style="height:600px;"></vizzy>
[ { activate: () => window.shuffleColorAndResize(10, 1, 1), reverse: () => window.shuffleColorAndResize(3, 1, 1), index: 0 }, { activate: () => window.shuffleColorAndResize(10, 0.1, 6), reverse: () => window.shuffleColorAndResize(10, 1, 1), index: 1 }, { activate: () => window.shuffleColorAndResize(3, 0.1, 6), reverse: () => window.shuffleColorAndResize(10, 0.71, 3), index: 2 } ]

Vizzy Element with Fragments

  • Use space to navigate forward.
  • Through custom visualizations
  • You can still drive the presentation
  • *there is a caveat though.
  • Use the mouse to interact with the vizzy. Try clicking on the vizzy

Background Vizzy Element

This slide uses a vizzy element as a background.

With fragments

Multiple Vizzy Elements

You can place vizzy elements just as you would any other html entity.

You may place as many as you wish in a section, and synchronize their fragments!

Multiple Vizzies in Vertical Stack

Run 2 visualizations at once in this section!

Synchronizing Fragments

Across multiple vizzy elements

Fragments are set with the vizzy src window._fragments object

rainbow.html


window._fragments = [
  {
    activate: () => recolorize(0.2, 0.9, 0.7),
    index: -1 // will autorun
  },
  {
    activate: () => recolorize(0.1, 1, 0.5),
    reverse: () => recolorize(1, 1, 0.5),
    index: 0
  },
  {
    activate: () => recolorize(1, 0.5, 1),
    reverse: () => recolorize(0.1, 1, 0.5),
    index: 2
  }
];

bar-chart.html


window._fragments = [
  { 
    activate: () => render("science"), 
    reverse: () => render("math"), 
    index: 1 
  },
  { 
    activate: () => render("language"), 
    reverse: () => render("science"), 
    index: 2 
  }
];

Working with websites

Vizzies can hold any web address.

Background Vizzy Element with Website

*Note: Cross-origin sites prohibit tracking keydown events, so you'll have to use the navigation arrows to advance the slide if you interact with the embedded website.

Another website (same origin)

Embed a Website in an Iframe


<vizzy data-src="https://khrisgriffis.com" data-scrolling="no"></vizzy>
                

<vizzy data-src="https://khrisgriffis.com" ></vizzy>

Advanced Fragments

Fragments do not need to be written on the vizzy's data-src source.

Advanced Fragments

Fragments are set with the vizzy src window._fragments object Or within the vizzy element itself!

bar-chart.html

window._fragments = [
{ 
  activate: () => render("science"), 
  reverse: () => render("math"), 
  index: 1 
},
{ 
  activate: () => render("language"), 
  reverse: () => render("science"), 
  index: 2 
}
];

index.html

<vizzy data-src="lib/viz/bar-chart.html">
[
  { 
    activate: () => window.render(""science""), 
    index: -1 
  },
  { 
    activate: () => window.render("language"), 
    reverse: () => window.render("math"), 
    index: 1 
  },
  { 
    activate: () => window.render("science"), 
    reverse: () => window.render("language"),
    index: 2 
  },
  { 
    activate: () => window.render("math"), 
    reverse: () => window.render("science"),
    index: 3 
  }
]
</vizzy>

Note: We need to use window to access any public functions on the source!

Advanced Fragments

[ { activate: () =>{ window.render("science")}, index: -1 }, { activate: () => {window.render("language")}, reverse: () => {window.render("math")}, index: 1 }, { activate: () => {window.render("science")}, reverse: () => {window.render("language")}, index: 2 }, { activate: () => {window.render("math")}, reverse: () => {window.render("science")}, index: 3 }, ]

Use any number of new fragments inline, including auto-run (-1)!

End

Thank you for exploring the Vizzy plugin for Reveal.js.