CODEWITHSUNDEEP
juliavega-lite
Ilya Voytov
Ilya Voytov

Reputation: 339

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

I have a dataset of the following format, with a price index and a confidence interval (lower and upper) for each date:

 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

I can successfully create a line plot with the below Vega Lite code for the entire city:

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

Basic chart

Now I would like to expand this to chart to be multi-faceted, by borough and by house_class.

The line part works great by just adding a row and column but I can't get it to work with my confidence interval error bands.

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

enter image description here

When I try this:

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

I get the following error:

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

Upvotes: 1

Views: 174

Answers (1)

هنروقتان
هنروقتان

Reputation: 788

you should use facet and inside its spec use layer, for example something like:

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

Upvotes: 2

Related Questions