Vega-lite: Use `zindex` for layer `order` channel instead

Created on 5 Nov 2016  路  17Comments  路  Source: vega/vega-lite

Currently we use sort transform to determine layer order for order channel.
In Vega 3, we can consider using zindex property instead.

Area - Visual Encoding P3

Most helpful comment

zindex support would be helpful for interactive use cases to pull selected points to the foreground:

z-index-less: partially occluded points can be selected, but then are only partially visible.
untitled

with a simple z-index definition (in Vega)
untitled2

All 17 comments

Maybe we just add zindex or layer as its own channel?

This might allow us to make order means either path order or stack order and free up path channel for Geo stuff.

In case this effects your reasoning (it may not, but just to be safe): zindex is used only for sorting sibling nodes in the scenegraph tree. If zindex is set on individual items, it will have no effect on the ordering relationship between items that are children of different marks.

Since zindex expects non-negative integer, looks like we have to apply rank transform to determine range of zindex scale.

TODOs

  • [ ] Try modifying Vega manually

    • [ ] add scale for zindex based on origin.
    • [ ] How can we automatically determine range for zindex's scale
    • [ ] Add zindex to mark's encode using the scale above.
  • [ ] Modify the code

    • [ ] deal with the range for zindex scale
    • [ ] Add zindex following the typical steps for adding channel in #1278

How can we automatically determine range for zindex's scale

If we really need to do this, we might want to add this as a part of the layout data source rather than adding a new data source.

Since this is (1) complicated and (2) doesn't seem that useful anyway. Let's not include zindex in VL2. Whenever users need to re-order zindex their marks, it's a sign of overplotting anyway.

zindex support would be helpful for interactive use cases to pull selected points to the foreground:

z-index-less: partially occluded points can be selected, but then are only partially visible.
untitled

with a simple z-index definition (in Vega)
untitled2

Actually, one quick question --- do we always want this behavior for selected point?
If so, we could add zindex to the output Vega without adding new encoding channel in Vega too.

(Or even if we don't, we make this a config.)

Good question. I thought about it but wasn't able to think of zindex outputs that would generalize across selection designs (e.g., what if you wanted to highlight points _not in_ the selection, then the selected points should have a lower zindex; what to do with multiple selections per unit spec, etc.)

@arvind Do we still need this for 2.0 -- if not, we can move to Milestone 2.1?

Not required for 2.0. I switched the query_widgets example to explicitly use layers with #2464.

Note that I just make order for non-stack, non-line marks affect the underlying Vega mark's sort property, which also affect the other. However, z-index may still be useful for the use case above.

Why can we not use order for the case above? You could set the order to be a special value if it's in the selection.

Order right now is designed to be mapped to mark sort, not zindex so it doesn't support ValueDef.

Also, even if we add special case to map "value" order to zindex, order still won't work with line's zindex as for line, order mean order of points in the line.

Just to add another voice to a request in this space. Ran into the same issue as @arvind above, although somewhat worse as the data is categorical on both axes. It could be I am doing visualisation all wrong, but in this context I have selected points hidden behind others on top.

My current workaround is to have the opacity of others decrease, and the increase the size of those selected. Not ideal but it makes the data visible.

(If you excuse the Elm, I tried to do something like this: encoding << order [ mSelectionCondition (selectionName "foo") [ mZIndex 1 ] [ mZIndex 0 ] ])

You can also create a second layer with just the filtered data.

This is a duplicate of https://github.com/vega/vega-lite/issues/4864, which is now fixed.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kanitw picture kanitw  路  3Comments

mcnuttandrew picture mcnuttandrew  路  3Comments

domoritz picture domoritz  路  4Comments

learnwithratnesh picture learnwithratnesh  路  4Comments

swanderz picture swanderz  路  4Comments