Dash Vega Components

[Harizliewzw]

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 alt
from dash import Dash, Input, Output, callback, dcc, html
from vega_datasets import data
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash
import dash_vega_components as dvc

app = 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", id="origin-dropdown"),
        # 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 class="container">
        {% 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?

[delsim]

@Harizliewzw when you try to view the app, do you get any error messages from the server or in the developer console of the browser?