Line Chart: Show all other countries as light grey

Question

In the example below two countries are shown (via transform/filter).

How do I modify the code so that:

1. All the remaining countries also appear as lines coloured light grey
2. All the remaining countries are excluded from the legend

Thanks.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Multiple line chart",
  "width": "container",
  "title": {"text": "Average babies per woman, 1800-2018"},
  "data": {
    "url": "https://www.trafforddatalab.io/interactive_graphics_companion/data/gapminder_dtfr.csv"
  },
  "transform": [
    {"filter": {"field": "country", "oneOf": ["Iran", "United States"]}}
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "field": "year",
      "type": "temporal",
      "timeUnit": "year",
      "axis": {"title": null, "grid": false}
    },
    "y": {
      "field": "fertilityRate",
      "type": "quantitative",
      "axis": {"title": null}
    },
    "color": {
      "field": "country",
      "type": "nominal",
      "legend": {"orient": "right", "direction": "vertical", "title": null}
    },
    "tooltip": [
      {
        "field": "year",
        "type": "temporal",
        "timeUnit": "year",
        "title": "Year"
      },
      {"field": "country", "type": "nominal", "title": "Country"},
      {
        "field": "fertilityRate",
        "type": "quantitative",
        "title": "Number of babies",
        "format": ".1f"
      }
    ]
  },
  "config": {"style": {"cell": {"stroke": "transparent"}}}
}

Answer 1

There are a few ways you could do this, but I would probably suggest using a layer chart to ensure that your selected lines will appear on top of all the others (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Multiple line chart",
  "width": "container",
  "title": {"text": "Average babies per woman, 1800-2018"},
  "data": {
    "url": "https://www.trafforddatalab.io/interactive_graphics_companion/data/gapminder_dtfr.csv"
  },
  "layer": [
    {
      "mark": {"type": "line", "color": "lightgray"},
      "encoding": {"detail": {"field": "country", "type": "nominal"}}
    },
    {
      "mark": "line",
      "transform": [
        {"filter": {"field": "country", "oneOf": ["Iran", "United States"]}}
      ],
      "encoding": {
        "color": {
          "field": "country",
          "type": "nominal",
          "legend": {"orient": "right", "direction": "vertical", "title": null}
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "year",
      "type": "temporal",
      "timeUnit": "year",
      "axis": {"title": null, "grid": false}
    },
    "y": {
      "field": "fertilityRate",
      "type": "quantitative",
      "axis": {"title": null}
    },
    "tooltip": [
      {
        "field": "year",
        "type": "temporal",
        "timeUnit": "year",
        "title": "Year"
      },
      {"field": "country", "type": "nominal", "title": "Country"},
      {
        "field": "fertilityRate",
        "type": "quantitative",
        "title": "Number of babies",
        "format": ".1f"
      }
    ]
  },
  "config": {"style": {"cell": {"stroke": "transparent"}}}
}