vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.68k stars 611 forks source link

Can't share facet legend of layered chart with independent color encoding #3933

Open iliatimofeev opened 6 years ago

iliatimofeev commented 6 years ago

I know that is strange chart. It's just a synthetic example on current dataset to show technical problem.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/barley.json"
  },
   "resolve": {
      "scale": {"color": "shared"}
   },

  "facet": {
    "row": {
      "field": "year",
      "type": "ordinal"
    }
  },
  "spec": {
        "resolve": {
      "scale": {"color": "independent", "x": "shared", "y": "shared"}
    },
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "x": {
            "field": "yield",
            "type": "quantitative"
          },
          "y": {
            "field": "variety",
            "type": "nominal"
          },
          "color": {
            "field": "site",
            "type": "ordinal"
          }
        }
      },
      {
        "mark": "line",
        "encoding": {
          "x": {
            "field": "yield",
            "type": "quantitative",
            "stack":"zero"
          },
          "y": {
            "field": "variety",
            "type": "nominal"
          },
          "color": {
            "field": "site",
            "type": "nominal"
          }
        }
      }
    ]
  }
}

image

iliatimofeev commented 6 years ago

In vcontat I can turn of with "legend":null, but I expected "resolve": { "scale": {"color": "shared" }}, will work to.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/barley.json"
  },
  "resolve": {
    "scale": {
      "color": "shared"
    }
  },

  "vconcat": [
    {
      "resolve": {
        "scale": {
          "color": "independent",
          "x": "shared",
          "y": "shared"
        }
      },
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {
              "field": "yield",
              "type": "quantitative"
            },
            "y": {
              "field": "variety",
              "type": "nominal"
            },
            "color": {
              "field": "site",
              "type": "ordinal"
            }
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {
              "field": "yield",
              "type": "quantitative",
              "stack": "zero"
            },
            "y": {
              "field": "variety",
              "type": "nominal"
            },
            "color": {
              "field": "site",
              "type": "nominal"
            }
          }
        }
      ]
    },
      {
      "resolve": {
        "scale": {
          "color": "independent",
          "x": "shared",
          "y": "shared"
        }
      },
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {
              "field": "yield",
              "type": "quantitative"
            },
            "y": {
              "field": "variety",
              "type": "nominal"
            },
            "color": {
              "field": "site",
              "type": "ordinal",
              "legend":null
            }
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {
              "field": "yield",
              "type": "quantitative",
              "stack": "zero"
            },
            "y": {
              "field": "variety",
              "type": "nominal"
            },
            "color": {
              "field": "site",
              "type": "nominal",
              "legend":null
            }
          }
        }
      ]
    }

  ]
}

image

PBI-David commented 1 year ago

Is this example from SO another example of this bug?

Editor link

image

Changing resolve from independent to shared breaks the chart.


{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "dedicated colors and sort order",
  "data": {
    "values": [
      {
        "Brand": "Brand A (orange)",
        "Statement": "S1",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S1",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S1",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S2",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S2",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S2",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S3",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S3",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S3",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      },
      {
        "Brand": "Brand A (orange)",
        "Statement": "S4",
        "Score": 0.6,
        "bSort": 2,
        "bColor": "orange"
      },
      {
        "Brand": "Brand B (green)",
        "Statement": "S4",
        "Score": 0.5,
        "bSort": 3,
        "bColor": "green"
      },
      {
        "Brand": "Brand C (red)",
        "Statement": "S4",
        "Score": 0.7,
        "bSort": 1,
        "bColor": "red"
      }
    ]
  },
  "resolve": { "scale": {"color": "independent"}},
  "facet": {"field": "Statement"},
  "columns": 2,
  "spec": {

    "encoding": {
      "x": {"field": "Score", "type": "quantitative"},
      "y": {"field": "Brand"},
      "color": {"field": "bColor", "scale": {"range": {"field": "bColor"}}}
    },
    "mark": {"type": "bar", "tooltip": true}
  }
}