Question

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

我正在与altair合作，而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

Bu，现在，我觉得很困惑。

我非常感谢获得一些有关如何将两个图表组合在一起的指示。

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
)

如何使用Vegalite分层这样的区域和文本图表？

1 个答案: