vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.62k stars 598 forks source link

Drop color and opacity encodings for trail marks #6718

Open armsp opened 4 years ago

armsp commented 4 years ago

Not sure if it is a bug or an enhancement.

I am using Trail to make a line chart with a varying size as well as opacity. I added the opacity encoding, which does not give any errors, but the graph itself vanishes.

Following is a very simple example of what I want to do -

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"a": "A", "b": 0.28}, {"a": "B", "b": 0.55}, {"a": "C", "b": 0.43},
      {"a": "D", "b": 0.91}, {"a": "E", "b": 0.81}, {"a": "F", "b": 0.53},
      {"a": "G", "b": 0.19}, {"a": "H", "b": 0.87}, {"a": "I", "b": 0.52}
    ]
  },
  "mark": "trail",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "size": {"field": "b", "type": "quantitative"},
    "opacity":{"field": "b",  "type": "quantitative"}
  }
}

Is it possible in Vega-Lite?

domoritz commented 4 years ago

That looks like a bug. Interestingly, value works.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"a": "A", "b": 0.28}, {"a": "B", "b": 0.55}, {"a": "C", "b": 0.43},
      {"a": "D", "b": 0.91}, {"a": "E", "b": 0.81}, {"a": "F", "b": 0.53},
      {"a": "G", "b": 0.19}, {"a": "H", "b": 0.87}, {"a": "I", "b": 0.52}
    ]
  },
  "mark": "trail",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "size": {"field": "b", "type": "quantitative"},
    "opacity":{"value": 0.2}
  }
}

I don't yet know whether Vega supports different opacities for different sections.

As a workaround, use color instead of opacity for now.

domoritz commented 4 years ago

Ups, color is also not working. Open the Chart in the Vega Editor

image

Does trail support mutiple colors?

domoritz commented 4 years ago

Actually, this is expected behavior as the trail mark only supports a single color and opacity. I guess we should drop encodings that are not supported to trail marks. We should show a warning. We should still support value encodings.

armsp commented 4 years ago

@domoritz So is it not possible to get varying opacity values in Vega-Lite, perhaps by using any other mark or technique/hack ?

domoritz commented 4 years ago

I think so. You could add many line segments each with a different color but you won't get a continuous color change.

jwoLondon commented 4 years ago

Perhaps its a Vega rather than Vega-Lite issue, but providing full channel encoding for trails would be really useful. I'd love to see line interpolation working too (monotone, basis etc.).

My use case: arrow-like symbolisation on flow maps. Currently in Vega-Lite I can create straight arrows with trails, or curved lines with line marks, but not curved trails of varying thickness (trails always use linear interpolation for positioning of vertices).

Screen Shot 2020-07-07 at 07 28 41 Screen Shot 2020-07-07 at 07 28 51