Integrating Visualizations in Hype and Publishing on WordPress

Tumult Hype is best for combining your various charts, graphs, and maps in a coherent design with captions, labels, and text, and buttons to provide navigation. Tumult Hype outputs HTML and JavaScript so it can be displayed in browsers across platforms (desktop, tablets, smartphones).

Here’s how to get your visualizations from Google Fusion Tables or Google spreadsheets into Hype and publish them in a WordPress post.

1. Finalize your visualizations. For charts from Google Spreadsheets, choose Publish chart from the top-right menu.

2. In the dialog box that appears, copy all the code.

3. In Hype, choose HTML widget from the top Insert Elements button and create an HTML widget on the Stage.

The HTML Widget is an element that allows you to paste HTML and JavaScript code.

4. Double-click the pencil icon at the bottom of the HTML Widget, which opens up a text-editing panel. Paste the Google Chart code.

For Google charts, make sure that you add http: inside of the double quotes just after src=, so the full URL is shown. For some reason, Google omits the http: and without it, Hype won’t be able to retrieve your chart.

5. For maps created in Google Fusion Tables, click on the Get Embeddable Link. Make sure that your map is shared so the public can see it with the link.

In the dialog box that appears, copy the HTML to embed in a website (the code in the second field).

6. Back in Hype, simply paste the copied iframe code into an HTML Widget.

7. You can resize your HTML Widget by dragging the corners out to accommodate the size of your chart or map:

You can also modify the size of your chart or map. Don’t be afraid to edit some of the values in the code. In the chart code, for example, play around with the values for height and width. You can either change the sizes of your charts and maps in Google docs before you generate the code to copy and paste into Hype, or you can modify some of the parameters after you’ve pasted the code into Hype.

8. To create simple navigation in Hype, create different “Scenes” from the top-left corner. Click on the Plus button to add more scenes. Double-click the names to re-name any scene. Drag to re-arrange them. Select and press the delete key to remove a scene.

9. Create your buttons. Any element can be interactive, but buttons are convenient. Select your button, and in the floating Inspector panel (View > Inspector), choose the tab with the Gear icon. Choose an action for the “On Mouse Click” event, which happens when your reader clicks on the button. Choose “Jump to Scene” and identify which scene you want the button to jump to in the next pulldown menu.

10. You can preview your interactive project at any point by clicking the Preview button at the top of the Hype interface.

11. When your Hype project is complete, publish the final HTML and associated JavaScript files. Choose File > Export as HTML. Choose either Folder or Dropbox. We recommend Dropbox because of its simplicity. Dropbox is a free online storage space service. Sign up for an account, and you can upload and share files in the “cloud”. When you publish a Hype project to your Dropbox account, Hype uploads all the necessary files and provides you with the direct link (URL) to your project.

If you publish your Hype project to a folder, Hype creates an HTML document that plays in a browser, and a folder of other dependent files. The folder and the HTML file must be kept together for your project to work properly.

12. Now for WordPress. Your interactive likely lives in an environment with other content, and we’ll use WordPress to publish your story. Log in to WordPress (the blog name followed by /wp-admin) and go to the Dashboard. Choose Posts > Add New from the left-hand menu.

Switch to the HTML editor by clicking on the HTML tab on the right. While the “Visual” mode is suited for simple text and images, the “HTML” mode lets you customize the HTML under the hood.

13. Your Hype project lives on an HTML page, and you have the Dropbox link to it. You’ll embed your Hype project in a WordPress post with an <iframe> tag. An <iframe> is an inline frame that embeds content from another Website into your own Website. Many media-sharing sites (YouTube, Google, SoundCloud) provide the iframe code so you can embed media. In fact, the code from your Google map is an iframe, which you could paste directly into your WordPress post, but in this example, we wanted to integrate the map with the chart in a tight package.

If your Hype project fits the width of the WordPress column, you can embed the iframe code directly into the post like so:

<iframe src="http://yourdropboxlinkhere" width="480 px" height="320 px"></iframe>

The height and width tags refer to the size of your Hype stage. An important note: WordPress normally strips out iframe code, but we have an iframe plug-in installed.

If your Hype project is too big for the WordPress column, an elegant solution is to create a link in your WordPress post that opens up your Hype project in a new window that floats above the browser. We use a WordPress plug-in called FancyBox that enables this effect. In order for the FancyBox plug-in to open up a link in a floating window, add class=”fancybox-iframe” as an attribute to the <a> anchor tag. The code looks like this:

<a class="fancybox-iframe" href="http://yourdropboxlinkhere">Your Story</a>

View the final sample Hype project integrated into a WordPress post with both approaches.

2 thoughts on “Integrating Visualizations in Hype and Publishing on WordPress

  1. Hi Russell,

    Great explanation. Two small things.
    1) The link to the sample Hype project seems to be broken.
    2) What is the name of the iframe-plugin ?

Leave a Reply