Help

How to embed a visualization on your site


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

Share button imageClick 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.

Embed code placement on player screenshot Embed code placement on project page screenshot

 

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.

Screenshot: New post with embed code and the resulting 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:

 

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