-
-
Save knanne/37712efaea0be6f10eb027c7aa82801e to your computer and use it in GitHub Desktop.
{% extends "full.tpl" %} | |
{% set altair = {'vis_number': 1} %} | |
{% block header %} | |
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script> | |
{{super()}} | |
{% endblock header %} | |
{% block data_png scoped %} | |
{% if 'application/vnd.vegalite.v1+json' in output.data %} | |
{% elif 'application/vnd.vegalite.v2+json' in output.data %} | |
{% elif 'application/vnd.vegalite.v3+json' in output.data %} | |
{% elif 'application/vnd.vega.v2+json' in output.data %} | |
{% elif 'application/vnd.vega.v3+json' in output.data %} | |
{% else %} | |
{{super()}} | |
{% endif %} | |
{% endblock data_png %} | |
{% block data_text scoped %} | |
{% if 'application/vnd.vegalite.v1+json' in output.data %} | |
{% elif 'application/vnd.vegalite.v2+json' in output.data %} | |
{% elif 'application/vnd.vegalite.v3+json' in output.data %} | |
{% elif 'application/vnd.vega.v2+json' in output.data %} | |
{% elif 'application/vnd.vega.v3+json' in output.data %} | |
{% else %} | |
{{super()}} | |
{% endif %} | |
{% endblock data_text %} | |
{% block data_priority scoped %} | |
{% for mimetype in ( | |
'application/vnd.vegalite.v1+json', | |
'application/vnd.vegalite.v2+json', | |
'application/vnd.vegalite.v3+json', | |
'application/vnd.vega.v2+json', | |
'application/vnd.vega.v3+json') | |
%} | |
{% if mimetype in output.data %} | |
{% if altair.update({'vis_number': altair.vis_number+1}) %}{% endif %} | |
<div id="vis{{cell['execution_count']}}_{{ altair.vis_number }}"></div> | |
<script type="text/javascript"> | |
var spec = {{ output.data[mimetype] | replace("None","null") | replace("True","true") | replace("False","false") }}; | |
var opt = {"renderer": "canvas", "actions": false}; | |
vegaEmbed("#vis{{cell['execution_count']}}_{{ altair.vis_number }}", spec, opt); | |
</script> | |
{% elif loop.index == 1 %} | |
{{super()}} | |
{% endif %} | |
{% endfor %} | |
{% endblock data_priority %} |
@knanne it is not clear what to do from your instructions. What exactly needs to be done with True
issue? Are you saying we should check the html in a text editor and change every single True
into true
? Or something else? I have saved your nbconvert_template_altair.tpl
, and although it is able to convert to html, the figures are not interactive.
Update: I have found a workaround by adding Jinja replace to the template. So var spec = {{ output.data[mimetype] }};
was changed to var spec = {{ output.data[mimetype] | replace("True","true") | replace("False","false") }};
@ilyasustun yes that is what I was suggesting. For this specific issue, manual intervention was* needed.
* The gist above has been updated with a workaround, as well as vega/altair#329 (comment) Please update your local template.
Ok updated the template file, but still no interactivity. Just plain html file, with no tooltip etc working.
@ilyasustun the gist has been updated to work with latest version of Altair. Please try again
@jakevdp Thank you for the input. I have updated the gist to accept mimetype
application/vnd.vegalite.v3+json
and requirevega-lite@3
andvega@5
. Also updated at vega/altair#329 (comment)@tkanngiesser The example used includes the BUG mentioned above
Explanation:
The following Python code
produces the following JSON in the vega spec
Manual Solution:
True
needs be changed totrue
in a text editor (Python variable is titlecase while Javascript variable is lowercase)I am unaware of an automated solution to this