- Notifications
You must be signed in to change notification settings - Fork133
Open
Description
Altair is another popular visualisation tool that have been added as part of Dash Components.
See: (https://dash.plotly.com/dash-vega-components)
Following the example in the url above with slight modification to use DjangoDash instead of Dash:
import altair as altfrom dash import Dash, Input, Output, callback, dcc, htmlfrom vega_datasets import dataimport dash_bootstrap_components as dbcfrom django_plotly_dash import DjangoDashimport dash_vega_components as dvcapp = DjangoDash('AltairExample', external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"])app.layout = html.Div( [ html.H1("Altair Chart"), dcc.Dropdown(["All", "USA", "Europe", "Japan"], "All",), # Optionally, you can pass options to the Vega component. # See https://github.com/vega/vega-embed#options for more details. dvc.Vega(id="altair-chart2", opt={"renderer": "svg", "actions": False}), ])@app.callback(Output("altair-chart2", "spec"), Input("origin-dropdown", "value"))def display_altair_chart(origin): source = data.cars() if origin != "All": source = source[source["Origin"] == origin] chart = ( alt.Chart(source) .mark_circle(size=60) .encode( x="Horsepower", y="Miles_per_Gallon", color=alt.Color("Origin").scale(domain=["Europe", "Japan", "USA"]), tooltip=["Name", "Origin", "Horsepower", "Miles_per_Gallon"], ) .interactive() ) return chart.to_dict().html example
{% extends 'base.html' %}{% load static %}{% block content %} {% load plotly_dash %} <div> {% plotly_app name='AltairExample' ratio=1 %} </div> <br>{% endblock %}The iframe does not render. Anyone has any luck with implementing altair with dash on django?