Sometimes you can just copy some plots on a blank slide and present them. This is a great way to present your work. I do this all the time for internal meetings, where the focus is the technical details. Some other times, you want to present your work in a more engaging way, with animations, transitions, and interactive plots.

I personally don’t particularly like MS PowerPoint, and I don’t like Google Slides either, even though they are great tools overall. I tested some time ago Reveal.js, and I got very impressed by the quality of the presentations you can make with it, also confirmed by the audience feedback.

The tutorial is very well-made on the website, and you can start from there. However, you need basically to write some HTML code, and this can be a bit cumbersome for some. For me, it was a nice experience, and I learned a lot about HTML, CSS and JavaScript, but I understand that not everyone has the time or the interest to do so.

You can see my presentation “Statistical Methods for Particle and Nuclear Physics - a short tour” I gave at the ECT* Exotico workshop in 2022 here. You can actually access the source code of this presentation with ctrl+u (at least on firefox), and you can see how I made it.

The cool video at the beginning is added with

<section  data-background-video="sfondo.mp4" data-background-video-loop data-background-video-muted data-background-opacity="0.2">

you need to add the video (in this case ‘sfondo.mp4’) in the same folder of the presentation.

You can animate the histogram this way

<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
                    <h3>Taking Data..</h3>
                    <div  id='histo'>
                        <script>
                            var gal = document.getElementById('histo');
                            for(var i = 0; i < 100; i++) {
                                gal.innerHTML += '<div data-id="box'+i+'" data-auto-animate-delay="0" style="background: white; position: absolute; width: 15px; height: 10px; margin: 10px; left:'+i*10+'px; bottom:-500px;"></div>';
                            };
                        </script>
                        <div data-id="box" data-auto-animate-delay="0" style="background: black; position: absolute; width: 1050px; height: 3px; margin: 10px; left:0px; bottom:-502px;"></div>

                    </div>
                </section>
                <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
                    <h3>..will the excess stay..</h3>

                    <div id='histo2'>
                        <script>
                            var gal = document.getElementById('histo2');
                            for(var i = 0; i < 100; i++) {
                                // var value = 100 +100*Math.random() ;
                                var baseline = 50 +100*Math.random();
                                var gaussian = 100*Math.pow(Math.E, (-1*Math.pow(i-70, 2))/(2*10*10)); 
                                var value = baseline +  gaussian;
                                var redd = (255 - gaussian);
                                gal.innerHTML += '<div data-id="box'+i+'" data-auto-animate-delay="'+i/40+'" style="background: rgb(255,'+ redd +','+redd+') ;position: absolute; width: 15px; height: '+value+'px; margin: 10px; left:'+i*10+'px; bottom:-500px;"></div>';
                            };
                        </script>
                        <div data-id="box" data-auto-animate-delay="0" style="background: black; position: absolute; width: 1050px; height: 3px; margin: 10px; left:0px; bottom:-502px;"></div>

                    </div>
                </section>

You can see the histogram growing in the second slide. Also apologies to the statistics aficionados out there - wanted to make something more good-looking. The JavaScript is used to make the code for a box for each binning.

Reveal also natively support Latex:

                    <small><p>
                        Likelihood is the core description of the statistical processes <br>
                        $$ \mathcal{L}(\text{data}|\mu,\theta) = \prod_{i \in bins} \mathcal{P}(\text{data}_i | \mu \cdot S_i(\theta)+B_i(\theta)) $$
                    </p>
                    <p class="fragment">
                        $\mu \cdot S_i(\theta)+B_i(\theta)$ is the prediction of the events in the bin $i$ <br>
                        data$_i$ is the number of observed events in the bin $i$
                    </p></small>
                    <p class="fragment">
                        <img src="pics/fittedlorentz1.png" width="450">
                    </p>

Provided that you include this at the end:

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
        <script src="plugin/zoom/zoom.js"></script>
        <script src="plugin/math/math.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,
                slideNumber: true,
                center: true,
                mathjax2: {
                    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js',
                    config: 'TeX-AMS_HTML-full',
                    // pass other options into `MathJax.Hub.Config()`
                    tex2jax: {
                    inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
                    skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
                    }
                },
				// Learn about plugins: https://revealjs.com/plugins/
                // plugins: [ RevealZoom, RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
				plugins: [ RevealZoom, RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.MathJax2 ]
			});
            Reveal.configure({ pdfMaxPagesPerSlide: 1 })
            Reveal.configure({ pdfSeparateFragments: false });
		</script>

The fragment class is used to make appear the text and the image one after the other.

As you see this file is ~1.5k lines of code alone, but is basically a simulation living in the browser. If you want to make a presentation with a lot of animations, transitions, and interactive plots, I think this is the way to go. For easier use cases - no complex animations, the code to write will be much less.

That’s it for now, I hope you find this useful.

Cheers,