Search code examples
d3.jsdata-visualizationamp-html

Can I implement a D3 svg animation in AMP page?

How can I insert a SVG element in a well-formed AMP page with a script that uses d3.js library to animate it? How can I buid a well-formed AMP page with a d3 data visualitation?

Solution

  • You'll need to place the interactive graphic into a separate html file and then embed it as an amp-iframe.

    From the documentation:

    Load the AMP script into the head tag:

    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

    Load the iframe onto the page at least 600px or 75% of the first viewport from the top. 

    <amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>