How to embed HTML page with javascript code in Beamer LaTeX?

Question

How to embed HTML page with javascript code (precisely D3 library with some hover over capabilities) in Beamer LaTeX?

Idea is to have a slide with HTML page embedded and during presentation I am able to hover over certain elements, ie it's not just a screenshot but I am able to have javascript features also.

Answer 1

One option is to :

1. keep the HTML page with javascript as is,
2. convert the rest of your Beamer latex presentation to pdf, and the pdf in-turn to HTML
3. link the two together.

pdf2htmlEX is a great tool for converting pdfs to html, retaining all the style and formatting. It seems to work well on slides created using Beamer.

Answer 2

http://manuels.github.io/texlive.js/ will get your goal accomplished. You will need to convert your LaTeX to javascript and run it all in a browser together in a javascript module.

var pdftex = new PDFTeX();
var latex_code = "" + 
  "\\documentclass{article}" + 
  "\\begin{document}" + 
  "\\LaTeX is great!" + 
  "$E = mc^2$" + 
  "\\end{document}"; 

pdftex.compile(latex_code) // now you have it in a javascript object.

This way it will end up being more portable as a mini-web app as opposed to just using Beamer LaTeX.

At this point you ca introduce a library like D3, Greensock,jQuery or a even a javascript powered canvas module.