How can I unbind legend on a facetted layered graph (Vega-Lite) (Deneb)

Question

My issue is that legends and color encoding are functionning correclty appart on different layer of my visualization, but when I have the color encoding of two layered mark together, nothing works correctly.
As you can see below, there is two color encoding, on two different mark, but only the first one is showing up
Vega Editor

I have tried to resolve legends and colors multiple times, at multiple places but can't make it work correctly.
I would like the two legends to show separatly and the two marks to have their own colors according to their own encoding.

You have errors in the console. Can you share a minimal reproducible example along with a mock up of what you're expected output should look like as it isn't clear. — Davide Bacci, Feb 08 '23 at 12:57
@DavidBacci My bad for not expressing correctly my expectation. You can find on my gist the two exemple of color encoding functionning correclty, but separatly : https://gist.github.com/hsavy (one bar color encoding, and one point color encoding) I would like to have the two legends and colors encoding ( that are on two differents marks ) at the same time. — hsavy, Feb 08 '23 at 13:27

score 1 · Accepted Answer · answered Feb 08 '23 at 13:32

I'm still not really following. Do you mean like this?

{
  "title": {
    "text": "Concordance Produit / Projet, réalisé à partir du planning "
  },
  "data": {
    "values": [
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product 1 V1 ",
        "Signification_bis": "MES",
        "Date_value": "Confirmed",
        "Date_value_MAD": "Confirmed",
        "Date_Début": "2023-04-28",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Produit",
        "Signification": "MAD",
        "Référentiel": "Product 1 V1 ",
        "Signification_bis": "START",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-03-31",
        "Date_Fin": "2022-07-07"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product1 V2",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "ToBeConfirmed ",
        "Date_Début": "2023-04-28",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Produit",
        "Signification": "MAD",
        "Référentiel": "Product1 V2",
        "Date_value_MAD": "Confirmed",
        "Signification_bis": "START",
        "Date_value": "Confirmed",
        "Date_Début": "2023-05-26",
        "Date_Fin": "2022-07-07"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product1 V3",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "ToBeConfirmed ",
        "Date_Début": "2023-04-28",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Produit",
        "Signification": "MAD",
        "Référentiel": "Product1 V3",
        "Signification_bis": "START",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-06-30",
        "Date_Fin": "2022-07-07"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product1 V4",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2024-06-28",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Produit",
        "Signification": "MAD",
        "Référentiel": "Product1 V4",
        "Signification_bis": "START",
        "Date_value_MAD": "ToBeConfirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-11-02",
        "Date_Fin": "2022-07-07"
      },
      {
        "Projet": "Project",
        "Produit": "Product2",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product2 V1",
        "Signification_bis": "MES",
        "Date_value_MAD": "ToBeConfirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2022-07-04",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product2",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product2 V2",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-01-31",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product2",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product2 V3",
        "Signification_bis": "MES",
        "Date_value_MAD": "ToBeConfirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-07-03",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product2",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product2 V4",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-08-18",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Projet",
        "Signification": "BESOIN",
        "Référentiel": "Product1 V5",
        "Signification_bis": "MES",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-06-30",
        "Date_Fin": "2023-11-15"
      },
      {
        "Projet": "Project",
        "Produit": "Product1",
        "ID_task": "Produit",
        "Signification": "MAD",
        "Référentiel": "Product1 V5",
        "Signification_bis": "START",
        "Date_value_MAD": "Confirmed",
        "Date_value": "Confirmed",
        "Date_Début": "2023-04-03",
        "Date_Fin": "2022-07-07"
      }
    ]
  },
  "facet": {"row": {"field": "Produit"}},
  "autosize": "pad",
  "config": {"tick": {"thickness": 20, "bandSize": 500}},
  "spec": {
    "width": 800,
    "height": 90,
    "layer": [
      {
        "layer": [
          {
            "params": [
              {"name": "grid", "select": "interval", "bind": "scales"}
            ],
            "transform": [
              {"filter": {"field": "ID_task", "oneOf": ["Produit"]}}
            ],
            "mark": {
              "type": "bar",
              "opacity": 1,
              "cornerRadius": 10,
              "fillOpacity": 0.5,
              "height": 15
            },
            "encoding": {
              "fill": {
                "field": "Date_value_MAD",
                "scale": {
                  "domain": ["Confirmed", "ToBeConfirmed"],
                  "range": ["#009999", "#333333"]
                },
                "legend": {"title": "Date_value_MAD", "type": "symbol"}
              }
            }
          }
        ],
        "encoding": {
          "x": {
            "field": "Date_Début",
            "type": "temporal",
            "axis": {
              "title": null,
              "grid": true,
              "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
              "gridDash": {
                "condition": {
                  "test": {"field": "value", "timeUnit": "month", "equal": 1},
                  "value": []
                },
                "value": [2, 2]
              },
              "tickDash": {
                "condition": {
                  "test": {"field": "value", "timeUnit": "month", "equal": 1},
                  "value": []
                },
                "value": [2, 2]
              }
            }
          },
          "x2": {"field": "Date_Fin"},
          "y": {
            "field": "Référentiel",
            "type": "nominal",
            "axis": {"title": null, "grid": true, "tickBand": "extent"}
          }
        }
      },
      {
        "transform": [{"calculate": "now()", "as": "now_field"}],
        "mark": {"type": "rule", "color": "#FE8389", "size": 1, "opacity": 0.4},
        "encoding": {"x": {"field": "now_field", "type": "temporal"}}
      },
      {
        "transform": [{"filter": {"field": "ID_task", "oneOf": ["Projet"]}}],
        "mark": {
          "type": "point",
          "color": "#EC6602",
          "size": 150,
          "orient": "horizontal",
          "opacity": 0.8,
          "shape": "triangle-up"
        },
        "encoding": {
          "color": {
            "field": "Date_value",
            "scale": {"range": ["#EC6602", "#FFB400"]},
            "legend": {"orient": "bottom"}
          },
          "x": {"field": "Date_Début", "type": "temporal"},
          "y": {"field": "Référentiel", "type": "nominal"}
        }
      }
    ]
  },
  "resolve": {"scale": {"y": "independent"}}
}

Yes ! I don't know why but on my power bi, the two legends were merging together as a single one :/ I see you've used Fill and color to avoid the issue ! Thank you — hsavy, Feb 08 '23 at 13:44

How can I unbind legend on a facetted layered graph (Vega-Lite) (Deneb)

1 Answers1