Embedding a D3.js Visualization into PowerPoint

This tutorial is about D3.js, a JavaScript library for manipulating documents based on data. D3.js is developed by Mike Bostock.

How to Embed a D3.js Visualization into PowerPoint

There’s a way to apply D3.js visualizations directly into PowerPoint. This method includes interactivity (not static). This is helpful especially for a seamless presentation that doesn’t require opening a browser to show a D3.js viz.

Simply follow the steps below:

1. Download the LiveWeb plug-in

The LiveWeb plugin works on PowerPoint versions up to 2013. It allows you to insert web pages into a PowerPoint slide. You can download LiveWeb [here](http://skp.mvps.org/liveweb.htm)

2. Configure Liveweb Plugin

By default, Microsoft blocks the ActiveX control that enables LiveWeb to work properly. To remedy this, go to Registry Editor (type ‘regedit’ on Windows search). Navigate to the following registry:

Click to Run installation of Office 2013:
subkey:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\15.0\ClickToRun\REGISTRY\MACHINE\Software\Wow6432Node\Microsoft\Office\15.0\Common\COM Compatibility\

or MSI installation of Office 2013:
subkey:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Office\15.0\Common\COM Compatibility\

Now find the Web Browser Control {8856F961-340A-11D0-A96B-00C04FD705A2} and replace the value from 1024 to 0.

3. Configure Office Web Browser Control

The above steps should be able to make LiveWeb work, but may still cause D3 charts to not work properly. This is because Web Browser Control uses an older version of Internet Explorer by default. So we’ll be changing the registry once more to select a recent version of Internet Explorer.

64 bit or 32 bit only machine:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

32 bit on 64 bit machine:
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

Value Key: DWORD YourApplication.exe

The value to set this key to is: 11001 (0x2AF9). This sets the webpage view to use Internet Explorer 11.

UPDATE for WINDOWS 10: For Windows 10, you may need to create a new DWORD value with the following:
“App.exe”=dword:00002af9
“App.vshost.exe”=dword:00002af9

4. Configuring Your HTML Code

This is an alternative to Step 3 if you weren’t able to make edits to the registry properly.

Add the following code to your index.html’s head. This meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.

5. Inserting Your D3 Data Visualization

Now that the configuration is done, you may now start inserting web pages to PowerPoint.In the ‘Insert’ tab, there should be an option to insert a ‘Web Page’. A wizard will open that’s easy to follow through, and you’ll be prompted to input a web URL for your web page/visualization. You may also input a file path if you have your files saved locally.

 

Jose

I'm an ordinary guy discovering my creativity each day. I try my best to enjoy the journey and help others along the way.

 

Leave a Reply

Your email address will not be published. Required fields are marked *