时间戳

首页 > 解决方案 > 如何使用 Vegalite 对区域和文本图表进行分层？

python - 如何使用 Vegalite 对区域和文本图表进行分层？

问题描述

我试图了解是否可以在这里将两个图表叠加在一起，因此面积图和文本图表都与 vega lite 一起出现。

我正在与 altair 合作，这反过来又会生成正在渲染的 vega 规格。

Vega 规范可能非常冗长，因此完整的数据集和生成的 vega 规范列在此要点中。

https://gist.github.com/mrchrisadams/67debffb4ef163e5e41c14ec634dc0fc

我将概述我认为我在下面寻求帮助的主要问题。

据我了解，我可以使用 altair/vega 从数据集创建图表，然后通过在通道中编码各种信息来描述标记。

所以对于面积图，我可以这样做：

area_chart=alt.Chart(band_df, width=600, height=400).mark_area().encode(
    alt.X('total_no:Q', stack='center', title='Number of transactions in each band'),
    alt.Y('bands:N', title='Spend bands', sort=alt.EncodingSortField(
            field="avg_value",
            op="sum", 
            order="descending" )),
    alt.Color('year(date):O', scale=alt.Scale(
            range=[ '#6CC6BC', '#49B4DF','#36508B', '#000033'])),
    alt.Column('year(date):O', title='Date')
)

稍后，我可以对另一个图表执行相同的操作，但使用文本标记而不是区域标记：

text_chart = bars.mark_text(
    baseline='middle',
    dx=3  # Nudges text to right so it doesn't appear on top of the bar
).encode(
    text='total_no:Q'
)

我可以一次生成一个，它们看起来不错，但我不清楚如何将它们分层到相同的视觉效果中，因为我回到这里的错误对我来说并不是那么容易理解：

---------------------------------------------------------------------------
SchemaValidationError                     Traceback (most recent call last)
~/.virtualenvs/my-project-UP1n69pC/lib/python3.6/site-packages/altair/vegalite/v2/api.py in to_dict(self, *args, **kwargs)

    419         if dct is None:
    420             kwargs['validate'] = 'deep'
--> 421             dct = super(TopLevelMixin, copy).to_dict(*args, **kwargs)
    422 
    423         # TODO: following entries are added after validation. Should they be validated?

~/.virtualenvs/my-project-UP1n69pC/lib/python3.6/site-packages/altair/utils/schemapi.py in to_dict(self, validate, ignore, context)

    252                 self.validate(result)
    253             except jsonschema.ValidationError as err:
--> 254                 raise SchemaValidationError(self, err)
    255         return result
    256 

SchemaValidationError: Invalid specification

        altair.vegalite.v2.api.LayerChart->layer->items, validating 'anyOf'

{'data': {'name': 'data-8f569c8f407b14d634bf02141db458f8'}, 'mark': 'area', 'encoding': {'color': {'type': 'ordinal', 'field': 'date', 'scale': {'range': ['#6CC6BC', '#49B4DF', '#36508B', '#000033']}, 'timeUnit': 'year'}, 'column': {'type': 'ordinal', 'field': 'date', 'timeUnit': 'year', 'title': 'Date'}, 'x': {'type': 'quantitative', 'field': 'total_no', 'stack': 'center', 'title': 'Number of transactions in each band'}, 'y': {'type': 'nominal', 'field': 'bands', 'sort': {'op': 'sum', 'field': 'avg_value', 'order': 'descending'}, 'title': 'Spend bands'}}, 'height': 400, 'width': 600} is not valid under any of the given schemas

我需要做什么才能将它们结合起来？

您可以将要点中列出的 vegaspec 发布到此渲染器，以查看我的目标：

https://vega.github.io/editor/#/custom/vega-lite

卜现在，我想我难住了。

我将非常感激能得到一些关于如何组合这两个图表的指示。

标签： pythonvega-litealtair

解决方案

问题是您不能对分面图表进行分层（通常，不能保证分面会对齐）。您需要做的是刻面分层图表。

我无法在没有数据集的情况下测试代码，但它可能看起来像这样：

area_chart = alt.Chart(width=600, height=400).mark_area().encode(
    alt.X('total_no:Q', stack='center', title='Number of transactions in each band'),
    alt.Y('bands:N', title='Spend bands', sort=alt.EncodingSortField(
            field="avg_value",
            op="sum", 
            order="descending" )),
    alt.Color('year(date):O', scale=alt.Scale(
            range=[ '#6CC6BC', '#49B4DF','#36508B', '#000033'])),
)

text_chart = area_chart.mark_text(
    baseline='middle',
    dx=3  # Nudges text to right so it doesn't appear on top of the bar
).encode(
    text='total_no:Q'
)

alt.layer(
    area_chart,
    text_chart
).facet(
    column=alt.Column('year(date):O', title='Date'),
    data=band_df
)

推荐阅读