Search code examples
visualizationscalevega-lite

Vega-Lite - Error in the scales of circles and lines

I'm trying to use Vega-Lite to do a plot similar to a graph, where nodes are connected to other nodes by edges. The nodes vary in size according to a variable,while the edges width also vary. The information for the nodes is stored in a different dataset than the information for the edges.

The problem is, once I try to plot everything together ("nodes" + "edges"), Vega-Lite is marking the size of the nodes very small (almost not visible). If I don't use the "size" for my edges plot, everything comes out normal.

Here is an example of what I'm doing (note that the notation is a bit different from native Vega-Lite, because I'm programming on Julia):

v1 = @vlplot(
    mark={:circle,opacity=1},
    x={μ[:,1],type="quantitative",axis=nothing},
    y={μ[:,2],type="quantitative",axis=nothing},
    width=600,
    height=400,
    size={μ_n,legend=nothing,type="q"})
v2 = @vlplot(
    mark={"type"=:circle,color="red",opacity=1},
    x={ν[:,1],type="quantitative",axis=nothing},
    y={ν[:,2],type="quantitative",axis=nothing},
    width=600,
    height=400,
    size={ν_m,legend=nothing,type="q"})

enter image description here

Then, when I create the visualization for the edges, and plot everything together:

v3 = @vlplot(
    mark={"type"=:line,color="black",clip=false},
    data = df,
    encoding={
    x={"edges_x:q",axis=nothing},
    y={"edges_y:q",axis=nothing},
    opacity={"ew:q",legend=nothing},
    size={"ew:q",scale={range=[0,2]},legend=nothing},
    detail={"pe:o"}},
    width=600,
    height=400
)
@vlplot(view={stroke=nothing})+v3+v2+v1

enter image description here

Any ideas on why this is happening and how to fix it? (Note that the "scale" attribute is not the reason. Even if I remove it, the problem persists).

Solution

  • When rendering compound charts, Vega-Lite uses shared scales by default (see https://vega.github.io/vega-lite/docs/resolve.html): it looks like when your size scale is shared between the line and circle plots, it leads to poor results.

    I'm not familiar with the VegaLite.jl syntax, but the JSON specification you'll want on the top-level chart is:

     "resolve": {"scale": {"size": "independent"}}