Question on Deneb color Mapping

Deneb Showcase
1

Hi everyone,

so I’m working on this project and even tho i mapped the colors it won’t appear in the right way
Exemple1
until i select Brands with the same colors it goes right , but if i add one more that has the same color of another one it starts bugging out
exemple2
As you can see the third model added is not respecting the correct color mapping.
plus if its possible i would like to have a dynamic legend where there are not more then one model selected per brand it also show the model in the legend:

exemple 3
exemple 3873×444 30.7 KB

the code used for the linechart is this one :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title":{
    "text":"Trend",
    "fontSize":20,
    "anchor":"start",
    "color":"#243781",
    "offset":15,
    "font":"calibri"
  },
  "description": "Linechart Trends",
  "data": {"name": "dataset"},
  "layer": [
    {
    "mark":{
      "type":"line",
      "strokeWidth":4
    },
    "encoding":{
      "x": {
        "field":"Quarter",
        "type":"nominal",
        "axis":{"labelFontSize":16,
        "title":null,"labelAngle":0,"labelColor":"#243781","tickColor":"transparent","domainColor":"transparent","labelFont":"calibri"}
      },
      "y":{
        "field":"Value",
        "type":"quantitative",
        "axis":{"labelFontSize":16,"grid":false,"title":null,"labelColor":"#243781","tickColor":"transparent","domainColor":"transparent","labelFont":"calibri"},
        "scale":{"zero":false}
      },
      "color":{
        "field": "Brand",
        "type":"nominal",
        "scale":{
          "domain":{"data":"dataset","field":"Brand"},
          "range":{"data":"dataset","field":"Color"},
          "undefined":"#EAEAEA"
        },
        "legend":{"title":null,"labelFont":"calibri","labelFontSize":16}
      },
      "detail":{
        "field":"Model",
        "type":"nominal"
    }
  }
},
{
  "mark":{"type":"point","filled":true,"size":60},
  "encoding":{
    "x":{
      "field":"Quarter",
      "type":"nominal"
    },
    "y":{
      "field":"Value",
      "type":"quantitative"
    },
    "color":{
      "field":"Brand",
      "type":"nominal"
    },
    "tooltip":[
      {"field":"Model","type":"nominal"},
      {"field":"Value","type":"nominal"}
    ]
  }
}
  ]
}

And ill’ also upload the datasets + the pbi file
Exempletofix.pbix (1.5 MB)
colors_table.xlsx (4.9 KB)
dataset_brands_models_updated.xlsx (10.0 KB)

2

Hi @tom071136.

I’m unfamiliar with the syntax used for the colour encoding of the line mark (scale/domain, scale/range)

"color": {
  "field": "Brand",
  "type": "nominal",
  "scale": {
	"domain": {
	  "data": "dataset",
	  "field": "Brand"
	},
	"range": {
	  "data": "dataset",
	  "field": "Color"
	},
	"undefined": "#EAEAEA"
  },
  "legend": {
	"title": null,
	"labelFont": "calibri",
	"labelFontSize": 16
  }
},

so I have no comment on how its’ behaving. I’ll try re-writing using syntax I’ve seen before and will hopefully be able to comment further. (I have commitments for the rest of the day and the remainder of the week, so may not post anything for a couple of days.)

Greg

3

In Vega/Vega-Lite, a scale range can only have one of each colour for each unique value in the domain. The unique colour values will get resolved to less than the number of domain values, so the mapping is no longer valid and the colour assignment will ‘wrap around’ in the displayed legend.

From a data viz perspective, it’s probably also not a good idea to use the same colour for multiple categories tied to a legend, as it is unintuitive for your readers and this adds cognitive load to interpret your viz.

If you wish to achieve this effect and still have a legend visible, you must assign a slightly different value for each to create a 1:1 mapping.

If you want to map the colour to the mark and forego a legend, you can remove the encoding and assign the colour value via the mark property, e.g.:

"mark": {
  "type": "line",
  "color": {
     "expr": "datum['Color']"
  }
}

If the second approach works and you really want a legend, you could manually create your own legend out of marks and a concat layout.

You could also try creating an issue with the Vega-Lite team to try and change this behaviour if you feel strongly that it should be permitted.

1 Like