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