使用牛郎星制作仪表板

Question

我想使用出色的牛尾库来创建仪表板。有没有一种方法可以创建仪表板而不显示任何代码？我在这里看到了一些非常好的例子：研究/探索-风化.，但是代码也是可见的。另外，什么是牛市最好的前端(经过良好测试/易于使用)？实验室？朱庇特？

Answer 1

任何牛市图都可以使用chart.save("filename.html")保存为HTML。如果您使用web浏览器打开结果文件，您将看到没有任何相关Python代码的图表。

或者，您可以使用chart.to_json()获取JSON图表规范，然后可以使用vega-嵌入嵌入任何网页.这正是在chart.save导出的页面中所做的工作。

至于你的第二个问题(请在未来尝试将你的StackOverflow帖子限制在一个单一的问题上)：牛尾与JupyterLab、木星笔记本、CoLab、nteract和氢一起工作。您可以使用任何这些前端，虽然有些需要一些额外的设置。详情请参见已启动/installation.html。我使用JupyterLab，并建议从这一点开始。

Answer 2

除了创建独立的HTML文件和使用vega之外，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仪表板包。这是文档中的一个例子

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))

​

​

流光

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)

​

​

Answer 3

除了@jakevdp所建议的内容之外，我发现导出json格式的图表定义并将其呈现在来自Mike的(仍然是beta的) 可观察笔记本中非常有用:图形/交互是用altair生成的，而普通的HTML或javascript很容易在“反应性”环境中添加模板UI (即.每当单元的输入发生变化时，都会按拓扑顺序自动重新评估它们)。代码几乎完全隐藏在那里，同时，你可以利用“计算文章”的概念，让木星如此受欢迎。创建一个相当复杂和干净的UI/仪表板对我来说比使用木星+小部件更容易，而且，多亏了altair，不用手工编写“复杂”图表。