在 Vega-Lite.jl 中制作带误差带的多面折线图(又名带置信区间的网格图)

Making faceted line charts with errorbands (aka Trellis charts with confidence intervals) in Vega-Lite.jl

我有以下格式的数据集,每个日期都有价格指数和置信区间(下限和上限):

 Row │ borough   house_class  index    ci₀      ci₁      dates
     │ String15  String7      Float64  Float64  Float64  Date
─────┼──────────────────────────────────────────────────────────────
   1 │ Queens    SFH          1.0      1.0      1.0      2003-03-31
   2 │ Queens    SFH          1.10301  1.13093  1.07645  2003-06-30
   3 │ Queens    SFH          1.17184  1.2096   1.13636  2003-09-30
   4 │ Queens    SFH          1.23384  1.28435  1.18716  2003-12-31
   5 │ Queens    SFH          1.28346  1.34361  1.22847  2004-03-31

我可以使用以下 Vega Lite 代码为整个城市成功创建线图:

idx |>
@vlplot(x=:dates) +
@vlplot(:line,
   y={
        :index,
        title="NYC Price Index",
        scale= {zero = false }
    },
) +
@vlplot(mark=:errorband,
    y=:ci₀,
    y2=:ci₁,
    x="dates")

现在我想通过 boroughhouse_class 将其扩展为多面图表。

线条部分只需添加一个 rowcolumn 就可以很好地工作,但我无法让它与我的置信区间误差带一起工作。

idxb |>
@vlplot(x=:dates, 
    :line,
   y={
        :index,
        title="NYC Price Index",
        scale= {zero = false }
    },
    row=:borough,
    column=:house_class
)

当我尝试这个时:

idxb |>
@vlplot(x=:dates) +
@vlplot(:line,
   y={
        :index,
        title="NYC Price Index",
        scale= {zero = false }
    },
) +
@vlplot(mark=:errorband,
    row=:borough,
    column=:house_class,
    y=:ci₀,
    y2=:ci₁,
    x="dates")

我收到以下错误:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at /Users/ilya/.julia/artifacts/5cc2ca447001163b90bb24e24a389e4f7b0f1e88/vg2svg.js:42:32
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
TypeError: Cannot read property 'length' of undefined

你应该使用 facet 并在其 spec 中使用 layer,例如:

data |> @vlplot(facet = {row = {field = "x1"}},
                 spec = {
                 layer = [
                    {mark = :point, x = :x2, y = :x3},
                     {mark = :line, x = :x2, y = :x3}
                 ]
                 }
                 )