block by alansmithy b28db498cf830f61e8eb

Using Pym.js to create a dynamic, responsive graphic

Full Screen

Pym.js

Pym.js by NPR is a really useful tool for deploying responsive SVG graphics.

Pym.js works by creating dynamic iframes on a (parent) page which can transmit window-size changes to an embedded (child) page. The child can also send changes back to the parent if interaction causes the embedded item to change in height. Crucially, the child page can be set to redraw its content when a window is resized, allowing different content to be generated depending on the size of the iframe.

This playful (and artistically inept) example illustrates the concept by using d3 to draw different images (a ‘landscape’ landscape and a ‘portrait’ portrait) depending on the window width. To see it properly using bl.ocks.org, you’ll need to launch into the new window view - then just resize the window by dragging the window in and out (the switch happens at 600px).

You can read more about using pym.js on the NPR Blog

You can see data visualisation examples using this approach on Visual.ONS

index.html

svgimage.html