d3.js - Can I implement a D3 svg animation in AMP page?

Question

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?

Answer 1

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>