使用 altair 制作仪表板

Question

我想使用优秀的 altair 库来创建仪表板。有没有办法创建仪表板而不显示任何代码？我在这里看到了一些非常好的例子：https://altair-viz.github.io/case_studies/exploring-weather.html 但代码也是可见的。另外，什么是 altair 最好的（很好 tested/easy 使用）前端？科拉布？木星？

Answer 1

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

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

导出的页面中完成

关于你的第二个问题（以后请尽量将你的 Whosebug 帖子限制在一个问题上）：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 中呈现它非常有用：graphs/interactions 是用 altair 生成的，而样板文件 UI 很容易在 HTML 或 javascript 中添加到 "reactive" 环境中（即 ... 只要单元格的输入发生变化)，单元格就会自动按拓扑顺序重新计算。代码几乎完全隐藏在那里，同时，您可以利用使 Jupyter 如此流行的 "computational essay" 的想法。创建一个相当复杂和干净的 UI/Dashboard 对我来说比使用 Jupyter + 小部件更容易，而且感谢 altair，无需手动编写 "complex" 图表。

Answer 3

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

面板

面板既可以在笔记本中使用，也可以作为独立的仪表板使用。它还允许您将仪表板嵌入单个 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)

监听 Vega 事件和定义自定义回调的能力，例如选定的点最近合并到 Panel 中并包含在 0.13 版本中！这是唯一支持对 Altair 图表中的选择进行自定义回调的 Python 仪表盘包。这里是 an example from the docs:

penguins_url = "https://raw.githubusercontent.com/vega/vega/master/docs/data/penguins.json"
brush = alt.selection_interval(name='brush')  # selection of type "interval"

chart = alt.Chart(penguins_url).mark_point().encode(
    x=alt.X('Beak Length (mm):Q', scale=alt.Scale(zero=False)),
    y=alt.Y('Beak Depth (mm):Q', scale=alt.Scale(zero=False)),
    color=alt.condition(brush, 'Species:N', alt.value('lightgray'))
).properties(
    width=250,
    height=250
).add_selection(
    brush
)

vega_pane = pn.pane.Vega(chart, debounce=10)

vega_pane

df = pd.read_json(penguins_url)

def filtered_table(selection):
    if not selection:
        return '## No selection'
    query = ' & '.join(
        f'{crange[0]:.3f} <= `{col}` <= {crange[1]:.3f}'
        for col, crange in selection.items()
    )
    return pn.Column(
        f'Query: {query}',
        pn.pane.DataFrame(df.query(query), width=600, height=300)
    )

pn.Row(vega_pane, pn.bind(filtered_table, vega_pane.selection.param.brush))

流光[=38=]

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 (I've asked about this)。

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)

使用 altair 制作仪表板

Making dashboards using altair

python

altair

面板

破折号