STEM Lecture and Reveal.js

STEM Lecture and Reveal.js

Recently, I was asked to give a STEM (Science, Technology, Engineering and Math) lecture at the local high school in Honeoye Falls, New York.  I have been trying to start a viz club for high school students there so I eagerly accepted the offer.  I knew I had plenty of content to wow the students, but I also wanted to provide useful information along with making it fun.  I wanted to show them how they can use these tech skills in real life and the kinds of jobs that would utilize these skills.

As I was thinking about this presentation, Michael Mixon was working with reveal.js on a #VizForSocialGood Project, which we hosted here for him.  I had used this framework before, but I was reinvigorated with his use of imagery along with the visualizations.  I decided to take that new energy and excitement and use it to create the STEM presentation in reveal.js.  In effect, this is me putting my money where my mouth is.  I was going to tell kids how great these skills are and what you can do with them.  So why not use all these skills right in front of them?

I ended up using at least 17 different tools along the way to create the content and presentation for them.  The best part is the presentation is available to the students to replay and/or see how I created it if they are as nerdy as I am.

Click here to see it and skip my commentary


The day before the presentation, I spiked a 104° fever and was in pretty rough shape.  However, enough sleep and gatorade got me to a presentable condition before the talk.  It turned out to be a beautiful day and the teacher who runs the series reminded me that high school kids + good weather in May + after school presentation = an uphill battle.  I expected an empty auditorium.  Kids wandered in and out to get to other activities, but somewhere in neighborhood of 20-25 students came.  I was told this was their highest attendance yet, so that was exciting.

My presentation began with an introduction to data visualization.  I talked about what it means and how it is used.  I asked for volunteers to count the 4’s to demonstrate how preattentive attributes can be used to aid visual perception.  These were high school kids so they were reluctant, but I don’t take no for an answer.  Thank you to the three brave volunteers who helped me out.

I moved onto how these skills are in demand.  I used a recent #MakeoverMonday visualization of LinkedIn jobs skills and two new ones I created just for this presentation.  One is a simple visualization of explosive growth in Tech skills using data published in Forbes magazine.  The other was a visualization of a list from collegechoice.net.  Imagine an article discussing the top 50 big data programs (mostly text), a few key pieces of information and big ass picture of the school.  I don’t know how anyone could effectively compare anything in the article.  I used parseHub to scrape the data and I visualized it in Tableau.  I told the kids about the process of web scraping to get the data and the benefits I added by visualizing it.  I also even added some additional analysis by looking for value schools (overall rank > cost rank).

Lastly, I talked a bit about my job and demonstrated how we use data visualization in the Government.  No presentation of mine is complete without a little fun, so I included a visualization of mountain bike riding at night using animation via the Tableau JS API, video of the rides via YouTube.  It was supposed to play ‘Breathe’ by Prodigy and wake everyone up for questions!  I tested the sound beforehand, but I think with turning on lights or something the speakers got turned off.  Bummer!  I was proud of that part because I had to figure out some tricky html to create controls for two different links to open within the same iframe on the same slide.  This was all so the music/animation would play on command when I was on that particular slide.


The students didn’t have many questions during the formal question time (it’s high school remember), but a few came up to me afterwards.  One was even interested enough to ask me to go back to the college choice slide to look for certain schools on his list.  The discussion was great and I was really happy to see the interest.  We even ended up opening the html file in Atom so he could see the raw code of the presentation.  Nerds Unite!


If you are coming to the #DCTUG this week in Washington D.C., Pooja and I have another deck like this ready to wow!  That’s called a teaser!

4 thoughts on “STEM Lecture and Reveal.js

  1. Debbie Crahen

    Great job, Adam! Sounds like you sparked interest in the high school students! Love it!

  2. Michael Johnson

    Wow this is so cool, thanks for sharing!

  3. Hey Adam.. the presentation looks cool. Can you provide some inputs on how you embedded it into the website ?

    1. Adam Crahen

      Hi Boopesh- The html/image files and css/js libraries were uploaded via ftp to the domain server. Thanks for the note!

Leave a Reply