Gapminder Interactive

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Drag the sliders to highlight points.",
  "data": {"url": "data/gapminder.json"},
  "width": 800,
  "height": 500,
  "layer": [
    {
      "transform": [
        {"filter": {"field": "country", "equal": "Afghanistan"}},
        {"filter": {"selection": "year"}}
      ],
      "mark": {
        "type": "text",
        "fontSize": 100,
        "x": 420,
        "y": 250,
        "opacity": 0.06
      },
      "encoding": {"text": {"field": "year"}}
    },
    {
      "transform": [
        {
          "lookup": "cluster",
          "from": {
            "key": "id",
            "fields": ["name"],
            "data": {
              "values": [
                {"id": 0, "name": "South Asia"},
                {"id": 1, "name": "Europe & Central Asia"},
                {"id": 2, "name": "Sub-Saharan Africa"},
                {"id": 3, "name": "America"},
                {"id": 4, "name": "East Asia & Pacific"},
                {"id": 5, "name": "Middle East & North Africa"}
              ]
            }
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "fertility",
          "type": "quantitative",
          "scale": {"domain": [0, 9]},
          "axis": {"tickCount": 5, "title": "Fertility"}
        },
        "y": {
          "field": "life_expect",
          "type": "quantitative",
          "scale": {"domain": [20, 85]},
          "axis": {"tickCount": 5, "title": "Life Expectancy"}
        }
      },
      "layer": [
        {
          "mark": {
            "type": "line",
            "size": 4,
            "color": "lightgray",
            "strokeCap": "round"
          },
          "encoding": {
            "detail": {"field": "country"},
            "order": {"field": "year"},
            "opacity": {
              "condition": {
                "test": {
                  "or": [{"selection": "hovered"}, {"selection": "clicked"}]
                },
                "value": 0.8
              },
              "value": 0
            }
          }
        },
        {
          "selection": {
            "year": {
              "type": "single",
              "fields": ["year"],
              "bind": {
                "input": "range",
                "min": 1955,
                "max": 2005,
                "step": 5,
                "name": "Year"
              },
              "init": {"year": 1955}
            },
            "hovered": {
              "type": "single",
              "fields": ["country"],
              "on": "mouseover",
              "empty": "none"
            },
            "clicked": {"type": "multi", "fields": ["country"], "empty": "none"}
          },
          "transform": [{"filter": {"selection": "year"}}],
          "mark": {"type": "circle", "size": 100, "opacity": 0.9},
          "encoding": {"color": {"field": "name", "title": "Region"}}
        },
        {
          "transform": [
            {
              "filter": {
                "or": [
                  {"and": [{"selection": "clicked"}, {"selection": "year"}]},
                  {"and": [{"selection": "hovered"}, {"selection": "year"}]}
                ]
              }
            }
          ],
          "mark": {
            "type": "text",
            "yOffset": -12,
            "fontSize": 12,
            "fontWeight": "bold"
          },
          "encoding": {
            "text": {"field": "country"},
            "color": {"field": "name", "title": "Region"}
          }
        },
        {
          "transform": [
            {
              "filter": {
                "and": [
                  {"selection": "hovered"},
                  {"not": {"selection": "year"}}
                ]
              }
            }
          ],
          "layer": [
            {
              "mark": {
                "type": "text",
                "yOffset": -12,
                "fontSize": 12,
                "color": "gray"
              },
              "encoding": {"text": {"field": "year"}}
            },
            {"mark": {"type": "circle", "color": "gray"}}
          ]
        }
      ]
    }
  ]
}