nbconvert template with support for (interactive) altair plots

altair_interactive.tpl

{% extends 'full.tpl' %}

{% block header %}
  <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  {{super()}}
{% endblock header %}

{%- block data_priority scoped -%}
{% if 'application/vnd.vegalite.v2+json' in output.data %}
    <div id="vis{{cell['execution_count']}}"></div>
    <script type="text/javascript">
        var spec = {{ output.data['application/vnd.vegalite.v2+json'] }};
        var opt = {"renderer": "canvas", "actions": false};
        vegaEmbed("#vis{{cell['execution_count']}}", spec, opt);
    </script>
{% else %}
    {{super()}}
{% endif %}
{%- endblock data_priority -%}

Thanks for this. Your gist does not work on all visualization types. Maps created in Altair were not included with 'application/vnd.vegalite.v2+json', because it was a different MIME type. I extended your code to all listed here and it worked.

{% for mimetype in ('application/vnd.vegalite.v1+json','application/vnd.vega.v2+json','application/vnd.vegalite.v2+json','application/vnd.vega.v3+json') %}
  {% if mimetype in output.data %}
    <div id="vis{{cell['execution_count']}}"></div>
    <script type="text/javascript">
      var spec = {{ output.data[mimetype] }};
      var opt = {"renderer": "canvas", "actions": false};
      vegaEmbed("#vis{{cell['execution_count']}}", spec, opt);
    </script>
  {% elif loop.index == 1 %}
    {{super()}}
  {% endif %}
{% endfor %}