python - 使用 altair 制作仪表板

Question

我想使用优秀的 altair 库来创建仪表板。有没有办法创建仪表板而不显示任何代码？我在这里看到了一些非常好的示例：https ://altair-viz.github.io/case_studies/exploring-weather.html但代码也是可见的。此外，altair 的最佳（经过良好测试/易于使用）前端是什么？可乐？木星？

Answer 1

任何 Altair 图表都可以使用chart.save("filename.html"). 如果您使用 Web 浏览器打开生成的文件，您将看到没有任何关联 Python 代码的图表。

或者，您可以使用获取 JSON 图表规范，然后可以使用vega-embed 将chart.to_json()其嵌入到任何网页中……这正是.chart.save

---

至于您的第二个问题（请在将来尝试将您的 StackOverflow 帖子限制为一个问题）：Altair 与 JupyterLab、Jupyter notebook、CoLab、nteract 和 Hydrogen 合作。您可以使用这些前端中的任何一个，但有些需要一些额外的设置。有关详细信息，请参阅https://altair-viz.github.io/getting_started/installation.html。我使用 JupyterLab，并建议从它开始。

Answer 2

除了@jakevdp 的建议之外，我发现以 json 格式导出图表定义并将其呈现在 Mike Bostock 的（仍为测试版）Observable Notebook中非常有用：生成图形/交互，altair同时可以轻松添加样板 UI “反应式”环境中的 HTML 或 javascript（即……只要输入发生变化，就会自动按拓扑顺序重新评估单元格）。代码几乎完全隐藏在那里，同时，您可以利用让 Jupyter 如此受欢迎的“计算论文”的想法。对我来说，创建一个相当复杂和干净的 UI/仪表板比使用 Jupyter + 小部件更容易，而且，感谢altair，无需手动编写“复杂”图表。

Answer 3

除了创建独立的 HTML 文件和使用 vega-embed，Altair 还兼容常见的仪表板软件包，例如 Panel、Streamlit 和 Dash。我为以下每个提供了一个简单的示例：

控制板

Panel 既可以在笔记本中使用，也可以作为独立仪表板使用。它还允许您在单个 HTML 文件中嵌入仪表板。

import altair as alt
from vega_datasets import data
import panel as pn
from panel.interact import interact


pn.extension('vega')

cars = data.cars()

def scatter_plot(x_column):
    chart = alt.Chart(cars).mark_point().encode(
        x=x_column,
        y='Displacement')
    return chart

interact(scatter_plot, x_column=cars.select_dtypes('number').columns)

流光

Streamlit 旨在尽可能接近常规 Python 脚本，而无需专注于前端编程。

from vega_datasets import data
import streamlit as st
import altair as alt


cars = data.cars()

x_column = st.selectbox('Select x-axis column', cars.select_dtypes('number').columns)

chart = alt.Chart(cars).mark_point().encode(
    x=x_column,
    y='Displacement')

st.altair_chart(chart, use_container_width=True)

短跑

Dash 比其他两个更冗长，因为它要求您明确说明前端和回调中的许多事情（这也提供了更细粒度的控制）。Altair 图形没有特定对象，因此我们将 HTML 绘图插入 iframe（我已经询问过这个问题）。

import altair as alt
from vega_datasets import data
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output


cars = data.cars()

# Setup app and layout/frontend
app = dash.Dash(__name__,  external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.layout = html.Div([
    dcc.Dropdown(
        id='x_column-widget',
        value='Miles_per_Gallon',  # REQUIRED to show the plot on the first page load
        options=[{'label': col, 'value': col} for col in cars.columns]),
    html.Iframe(
        id='scatter',
        style={'border-width': '0', 'width': '100%', 'height': '400px'})])

# Set up callbacks/backend
@app.callback(
    Output('scatter', 'srcDoc'),
    Input('x_column-widget', 'value'))
def plot_altair(x_column):
    chart = alt.Chart(cars).mark_point().encode(
        x=x_column,
        y='Displacement',
        tooltip='Horsepower').interactive()
    return chart.to_html()

if __name__ == '__main__':
    app.run_server(debug=True)