A Flexible Alternative to PowerPoint
Scroll down, swipe up or use your arrow keys to move through the slides.
Scroll down, swipe up or use your arrow keys to move through the slides.
I've put together many slide decks using PowerPoint and Keynote. I've regularly been frustrated by the restrictions they place on me.
Effective analytical software allows the user to explore datasets in a highly non-linear fashion but PowerPoint and Keynote tend to place the presenter in a straightjacket with little on-the-day flexibility.
With modern web browsers we can escape the PowerPoint straightjacket.
Web browsers are free. And freely available to anybody with an internet connection.
And they're becoming more and more powerful.
This slide deck is made using "only" HTML, CSS, JavaScript and SVG. These are all technologies native to web browsers. There's no need for plugins like Flash.
Let's start with a simple bar chart of some fictitious test data...
This is effective but only shows one set of test results. What if there were multiple tests? Will my audience be interested in every test? If so, do I need a slide for each set of results?
Using JavaScript we can add the ability to switch between tests. Then I can show my audience the other results if they ask me to (or decide at presentation time whether I have the time).
Click a test label to switch dataset.
Great. But for tests 2, 3 and 4 the data is no longer ordered neatly.
The audience has to do some mental gymnastics if they want to understand the ordering.
We can fix that too.
Click a test label to switch dataset. Click Sort to sort based on the current data.
Much better. But what if what if my audience is most interested in one particular examinee's results?
We can use a different colour to highlight a single bar of particular interest. Which bar that is can be chosen at presentation time.
Click a test label to switch dataset. Click Sort to sort based on the current data. Click a bar to highlight it.
This is a simple example using made-up data.
The next example, using real-world data, also allows the presenter to highlight specific data of interest.
But it's more open-ended, we can zoom in and out as we see fit.
Click a party label to highlight, drag a rectangle in the chart area to zoom.
Data for the Liberal Democrats prior to 1989 refers to combined support for the Liberal Party and SDP.
The chart on the next slide might be too messy to be that useful as a single static chart. But with the ability to highlight specific countries we can pick-out changes more easily.
With the same slide deck we can "personalise" the presentation for our audiences in Australia and Argentina (for example).
Click a country label to highlight the corresponding line. Click the chart title to switch between a bumps chart and a slopegraph.
Interactive maps are another possibility...
Drag the slider handle to change year or click the map to start/stop animation.
Circles mark the venue (yellow), winner (blue) and loser (red) of each final.
As well as interactivity, browser-based presentations open up some other possibilities.
Not sure if a dark or light background will be better? Why not decide on the day?
Click me! Click me! (Or press the "t" key.)
The text and graphics alter accordingly too (scroll back up to see).
The slide deck is responsive. Resize the browser window and the slides resize with it.
So does the text and the graphics. And, because they're vector graphics, the charts won't become blocky or pixelated. (Eventually the cloud background might look pixelated.)
You can select a different aspect ratio too - click below (or press the "a" key) to switch between 16:9, 16:10 and 16:12 ratios:
Click me! Click me!
JavaScript allows for calculations at presentation time. I previously mentioned the flexibility that comes with being able to highlight different data depending on your presentation location. Thanks to gelocation this doesn't necessarily need to be a manual process.
The next example combines both ad hoc calculation and geolocation to give (rough) directions to a notable Texan city.
Click the map and the browser will attempt to locate you. This may take a few seconds.
You are approximately km from Amarillo.
Your initial (absolute) bearing should be °.
Sorry, your browser doesn't support geolocation, so this example won't work.
Sorry, for some reason the browser cannot retrieve your location at the minute.
...the slides can go straight on your website.
As already mentioned, the slides are created using browser-native technologies. The structure is defined in HTML, the styling with CSS, the images are SVG and the interactions added with JavaScript.
The basic slide functionality is based on Mike Bostock's stack.js while there is copious use of Mike Bostock's d3.js for chart creation and interactive features. The file size of the map data was reduced massively using Mike Bostock's topojson. Thanks Mike!
In the Amarillo example the distance was calculated using d3.js. The bearing calculation is modified from a script on the Movable Type website.
The data for the Guardian/ICM poll results comes from the Guardian Datablog.
The data plotted on the Champions League Finals map comes from the UEFA Champions League Statistics Handbook. The map data itself was obtained from Natural Earth.
The bumps chart data was obtained from the Global Carbon Atlas website. Their sources are:
CDIAC: Boden, TA, G Marland, and RJ Andres. 2013. Global, Regional, and National Fossil-Fuel CO2 Emissions. Carbon Dioxide Information Analysis Center (CDIAC), Oak Ridge National Laboratory, US Department of Energy, Oak Ridge, Tenn., USA doi:10.3334/CDIAC/00001_V2013
UN: United Nations Population Division - World Population Prospects: The 2012 Revision, 2013