CODEWITHSUNDEEP
vega
Yuri Astrakhan
Yuri Astrakhan

Reputation: 10035

Renaming legend values in Vega Graphs, and keeping colors consistent

My data contains 3 columns - date, category, and value. The category is a short string code that I would like to expand, e.g. "r" => "regular", "n" => "prohibited", etc, and show proper legend strings. Is there a way to have a mapping {"r":"regular", "n": "prohibited"}- unlisted would be shown as is?

Also, since I have many similar graphs, I would like the colors to be consistent. Sorting categories does not help because not all graphs have all of them. How do I set up a mapping {"r":"blue", "n": "#332211"} I could use the mapped category name like "regular" instead. All non-mapped values should come from some other source like Categories20, etc.

Upvotes: 2

Views: 1421

Answers (1)

marcprux
marcprux

Reputation: 10385

You can use this variation on the built-in "scatter" example to set custom titles for individual labels. Look at the "legend_labels" scale.

{
  "width": 200,
  "height": 200,
  "data": [
    {
      "name": "iris",
      "url": "data/iris.json"
    }
  ],
  "scales": [
    {
      "name": "legend_labels",
      "type": "ordinal",
      "domain": ["setosa", "versicolor", "virginica"],
      "range": ["SET", "VER", "VIR"]
    },
    {
      "name": "x",
      "nice": true,
      "range": "width",
      "domain": {"data": "iris", "field": "data.sepalWidth"}
    },
    {
      "name": "y",
      "nice": true,
      "range": "height",
      "domain": {"data": "iris", "field": "data.petalLength"}
    },
    {
      "name": "c",
      "type": "ordinal",
      "domain": {"data": "iris", "field": "data.species"},
      "range": ["#800", "#080", "#008"]
    }
  ],
  "axes": [
    {"type": "x", "scale": "x", "offset": 5, "ticks": 5, "title": "Sepal Width"},
    {"type": "y", "scale": "y", "offset": 5, "ticks": 5, "title": "Petal Length"}
  ],
  "legends": [
    {
      "fill": "c",
      "title": "Species",
      "offset": 0,
      "properties": {
        "symbols": {
          "fillOpacity": {"value": 0.5},
          "stroke": {"value": "transparent"}
        },
        "labels": {
          "text": {"scale": "legend_labels", "field": "data"}
        }
      }
    }
  ],
  "marks": [
    {
      "type": "symbol",
      "from": {"data": "iris"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.sepalWidth"},
          "y": {"scale": "y", "field": "data.petalLength"},
          "fill": {"scale": "c", "field": "data.species"},
          "fillOpacity": {"value": 0.5}
        },
        "update": {
          "size": {"value": 100},
          "stroke": {"value": "transparent"}
        },
        "hover": {
          "size": {"value": 300},
          "stroke": {"value": "white"}
        }
      }
    }
  ]
}

Similarly, you can customize individual colors like in the "c" scale above.

Unfortunately, there isn't currently any way to customize any fallback behavior for unmapped values, so you need to ensure that your scales contain all the values in the domain. It might be good to file an enhancement request for that feature.

Upvotes: 5

Related Questions