Embed d3.js Visualization to Blog

written

I recently got a question from our user on how to embed d3.js visualization into their blog. A quick search returns several solutions like bl.ocks.org or Wordpress D3 plugin. The first solution requires programmer intervention each time content owner needs to update the site. Wordpress D3 plugin requires installation of plugin.

There comes vida.io embed. Our site provides simple solution. Blog content owner can update post without programmer’s intervention. In case of visualization update, he/she can use vida.io editor to quickly make change.

Here’s an example:

1
<iframe src="http://embed.vida.io/documents/SodotqYWppo6NWK9m" width="100%" height="340" seamless frameBorder="0" scrolling="no"></iframe>

The above visualization is responsive to window width. It fits to mobile devices. This is supported by viewbox resize technique:

1
2
3
4
5
6
7
8
9
10
function resizeViewbox() {
    var targetWidth = $('#canvas').width();

    if (targetWidth > frameWidth) {
      targetWidth = frameWidth;
    }

    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
}

It’s a simple technique that works with vida.io embed. Contact us if you have any question.


Comments