Search code examples
powerbivega-litevegadeneb

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

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.

Solution

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

    enter image description here

    {
  "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"}}
}