Using the Visualizing Player

Embed visualizations as complete, functioning projects on your blog or website. Whatever the format, from image to video to interactive, the Visualizing Player offers a single, easy-to-use embed code. More about the Visualizing Player.

Step 1: Get the embed code

Click the Share button on the visualization you want to embed and copy the code, or copy the embed code from the visualization’s project page.

Step 2: Paste the embed code into your blog or website

Create a post that includes the embed code, input as HTML rather than plain or rich text. Your site must allow <iframe> tags for the embedded player to appear (this is the same method that YouTube and Vimeo use to embed videos). When you view the post, the fully-functioning visualization appears in the embedded Player.

Choosing the size

The Visualizing Player will automatically resize the visualization to fit the space you give it. To customize the Player’s dimensions you can change the width and height when copying the embed code or modify the width and height manually in your code. Here is an example of the code with the editable dimensions highlighted:
<iframe src="http://www.visualizing.org/embedded/37441" width="600" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

Note: some visualizations cannot fit in small windows, and will automatically open a new tab or window when launched.

Troubleshooting

Problem: I enter the embed code in my post, but the visualization does not appear.
Solution: Make sure your site is not removing <iframe> tags from your posts. Different sites and blogging platforms will have different means of allowing <iframe> tags. Here are some popular ones:

• WordPress: install Embed iFrame plugin.
• Drupal: add iframe to allowed tags for input format.
• Tumblr: iframes should work on Tumblr by default; make sure you are editing the post as HTML, not as text, when you paste the code.

Still need help? Send us a message from the contact form.