Package: dash-vega-components
Dash Vega ComponentsWith theVegacomponent, you can displayVega-Altaircharts in yourPlotly Dashapplication. All features work as well with Vega-Lite and Vega specifications but the remainder of this README will focus on Altair as it is more common.pipinstalldash-vega-componentsAltair exampleFor the example below, you'll also need:pipinstallaltairvega_datasetsimportaltairasaltfromdashimportDash,Input,Output,callback,dcc,htmlfromvega_datasetsimportdataimportdash_vega_componentsasdvc# Passing a stylesheet is not requiredapp=Dash(__name__,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-chart",opt={"renderer":"svg","actions":False}),])@callback(Output("altair-chart","spec"),Input("origin-dropdown","value"))defdisplay_altair_chart(origin):source=data.cars()iforigin!="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())returnchart.to_dict()if__name__=="__main__":app.run(debug=True)You can also pass a Vega or Vega-Lite specification as a dictionary.CallbacksParametersare the basic building blocks to make an Altair chart interactive. They can either be simple variables or more complex selections that map user input (e.g., mouse clicks and drags) to data queries. In Vega, these are calledSignalsand the two concepts ofSignalsandParametersare closely linked. As an Altair user, you don't have to know the details and you can think of them as synonyms.You can trigger a Dash callback based on changes in any parameter which is defined in an Altair chart. To do this, you'll need tospecify anamewhen defining the parameter, for examplealt.param(name="my_param")oralt.selection_point(name="my_param")add the parameter name to thesignalsToObserveproperty of theVegacomponent:dvc.Vega(id="chart1", signalsToObserve=["my_param]). If you want to observe all signals, you can also passsignalsToObserve=["all"]useInput("chart1", "signalData")in your callback to access the value of"my_param"and react to changesFor more examples, seeexample_app.pywhich shows how to filter a pandas dataframe based on a selection in a chart and display it in a Dash data table (the same would work with the Dash AG Grid component), or head over tohttps://github.com/altair-viz/dash-vega-components/issues/5.Some ideas of what you could do with this:Filter a Dash data table based on the selected points in a scatter plot (seeexample_app.py)Based on a clickable bar chart, update other charts in your applicationIf you have geographic data, show an overview map of aggregated regional data. Use this map as a navigation element in a dash multi-page app so that if a user clicks on e.g. the US, they get to the US specific subpage...Further informationFor more infos on the properites of theVegacomponent, see its docstring inVega.py.To learn more about making Altair charts interactive, seeInteractive Charts - Vega-Altair docs.DevelopmentRequires npmpython-mvenv.venvsource.venv/bin/activate
pipinstall-rrequirements.txt
pipinstall-rrequirements-dev.txt

npminstall
npmrunbuild# Test package withpythonexample_app.pyVisithttp://localhost:8050in your web browserTo cut a new release, seeRELEASING.mdThis package is based on thedash-component-boilerplate template.