Altair: Dashboard integration with altair

[noklam]

I hope this is an approximate place to ask question.

What are some existing solution building tile style dashboard with altair? The altair library looks aesthetic pleasing with nice API. I have read that it mainly emit JSON and the rendering was done with vega. I am not a front end person and I am trying to introduce it to a data science team, so I try not to go with solution that require JS.

Is there any nice solution around? Thanks, any help is appreciated.

[jakevdp]

It depends what you want, but if you don't need any server communication, Altair can be used to crate self-contained dashboards like this one: https://altair-viz.github.io/gallery/interactive_cross_highlight.html

[noklam]

@jakevdp thanks for your quick response.
I think I need to share the dashboard to others, so probably I need some kind of web server.(or even just Jupyter?) And I need a tile like view, so I want something that I can arrange them in grid style as we have a wide screen.

This is probably not a altair specific question, but wonder what are some common solution.

[afonit]

@noklam , I have seen recent energy being poured into:
Voila from Quantstack: https://github.com/QuantStack/voila
Panel from pyviz anaconda inc: https://panel.pyviz.org/

[jakevdp]

You can share Altair charts with others by sharing the HTML, so it will work as long as you can embed all the data in the Altair specification (rather than, say, needing some sort of server-side computation or database query based on user interaction).

[jakevdp]

It really depends what you mean by "dashboard".

[noklam]

@noklam , I have seen recent energy being poured into:
Voila from Quantstack: https://github.com/QuantStack/voila
Panel from pyviz anaconda inc: https://panel.pyviz.org/

Does these solutions work with Altair already? I have read some articles about Pyviz before but it mention integration with Bokeh, Plotly etc only.

[noklam]

@jakevdp I guess the demo that you show is quite sufficient, I just need the ability to also stack it horizontally, I am not sure if there is an existing solution in Jupyter allows you to organize things in a grid style and export as an HTML.
Also, I am not quite sure how can I achieve this

so it will work as long as you can embed all the data in the Altair specification

Exploring in notebook environment is easy, but I would like to share it to someone easily without hosting any web server.

(edited: Just find this related issue, I guess I am asking for very similar things #767 )

[jakevdp]

I just need the ability to also stack it horizontally

If you use alt.hconcat you can stack charts horizontally.

I would like to share it to someone easily without hosting any web server.

chart.save('mychart.html') will save the chart to HTML. At that point you can email the file to someone, or post it on a website.

[djouallah]

just to share my own experience; I use Altair to generate self contained html dashboard, which I email to internal and external users, hopeful, it will be become the PDF of interactive charts !!!

[noklam]

@djouallah
Do you have some sample code/charts that you maybe able to share? Thank you.

[djouallah]

@noklam I have an example here, but I am a business users, so it is just two cross filters bar charts, one by departement, and the other by client and it show the budget planned vs actual,

https://github.com/djouallah/vega-lite/blob/master/charts.ipynb

[eleijonmarck]

@noklam @jakevdp

I make dashboards for food.

I have made a sample dashboard configuration using (Inspired by Uwe L Korn)

• vue
• altair

This is a combination of very little frontend skill and python backend for outputting graphs to make a web-server to make a dashboard.

See if you can try it out!
https://github.com/eleijonmarck/vue-altair-awesomeness

[noklam]

@eleijonmarck I cannot run your repository as there is some data file is missing. It would be great if you can include the data file if possible.

[eleijonmarck]

Thanks for checking it out!
@noklam just updated the repository. If you have any issues with the repository we can discuss it!

Updated to use altairs datasets to display how it could be fitted into a dashboard using <vega-embed>

[iaindillingham]

As an alternative to emailing an HTML file, if you don't mind your work being public (or at least behind an obfuscated URL), then you can push a Vega-Lite specification to a GitHub gist, then point the Vega-Lite editor to the gist's URL. My workflow:

• Make a set of charts in Jupyter lab with Altair and Pandas (hconcat and vconcat them together).
• Save the Vega-Lite spec to a file in a new directory (I use json.dump to indent the spec).
• Run gistup in the new directory, which initialises a new repository and pushes it to a new gist.
• Point the Vega-Lite editor to the new gist.

[noklam]

@eleijonmarck I think you forgot to push your repository?
I end up starting to learn Vue and Vuetify to build a simple example. I am concern though if it would become very slow once data size becomes larger. The sample dataset is quite small. It is easy for me to handle millions of + data points in a single dataset.

[djouallah]

@iaindillingham

then point the Vega-Lite editor to the gist's URL.

thanks for that, very interesting, but how the end users see the report ?

[iaindillingham]

You can give your users the Vega-Lite editor's URL @djouallah.

[MarcSkovMadsen]

You can develop dashboards with altair and python using various dashboarding solutions like Streamlit, Panel and Voila.

See for example awesome-streamlit.org and awesome-panel.org for some examples of Python dashboards.

[lrq3000]

https://github.com/sauercrowd/altair-dashboard