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

Question

我试图理解是否有可能将两个图表放在一起，因此面积图和文本图都会与vega lite一起出现。你知道吗

我正在使用牛郎星，这反过来又产生了正在渲染的织女星规格。你知道吗

织女星规范可能相当冗长，所以完整的数据集和生成的织女星规范列在这个要点中。你知道吗

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

我将概述主要问题，我认为我正在寻求帮助，虽然下面。你知道吗

所以据我所知，我可以用牛郎星/织女星的数据集创建一个图表，然后通过在一个通道中编码各种信息来描述标记。你知道吗

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

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

我需要做什么来合并它们？你知道吗

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

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

但是现在，我想我被难住了。你知道吗

如果能得到一些关于如何组合这两个图表的建议，我将非常感激。你知道吗

Answer 1

问题是你不能分层刻面图表（一般来说，不能保证刻面会对齐）。你需要做的是切面的分层图表。你知道吗

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

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
)