-
-
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 %} |
I changed the template the following but unfortunately it still does not render the chart in the html file. Any tip would be much appreciated. Thanks!
`{% extends "full.tpl" %}
{% set altair = {'vis_number': 1} %}
{% block header %}
<script src="https://cdn.jsdelivr.net/npm/vega@5"></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.v3+json' in output.data %}
{% elif 'application/vnd.vega.v5+json' in output.data %}
{% else %}
{{super()}}
{% endif %}
{% endblock data_png %}
{% block data_priority scoped %}
{% for mimetype in ('application/vnd.vegalite.v3+json','application/vnd.vega.v5+json') %}
{% if mimetype in output.data %}
{% if altair.update({'vis_number': altair.vis_number+1}) %}{% endif %}
<script type="text/javascript">
var spec = {{ output.data[mimetype] }};
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 %}`
@jakevdp Thank you for the input. I have updated the gist to accept mimetype application/vnd.vegalite.v3+json and require vega-lite@3 and vega@5. Also updated at vega/altair#329 (comment)
@tkanngiesser The example used includes the BUG mentioned above
Explanation:
The following Python code
# Create a selection that chooses the nearest point & selects based on x-value
nearest = alt.selection(type='single', nearest=True, on='mouseover',
fields=['x'], empty='none')produces the following JSON in the vega spec
'selection': {'selector001': {'empty': 'none', 'fields': ['x'], 'nearest': True, 'on': 'mouseover', 'resolve': 'global', 'type': 'single'}}Manual Solution: True needs be changed to true in a text editor (Python variable is titlecase while Javascript variable is lowercase)
I am unaware of an automated solution to this
@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
Altair 3 outputs mimetype
'application/vnd.vegalite.v3+json', and requiresvega-lite@3andvega@5.