Search code examples
timelinevega

How to turn the Vega timeline example of the first five US Presidents into one of the first five Canadian Prime Ministers?


https://vega.github.io/vega/examples/timelines/ shows a timeline visualization of the lifespans of the first five U.S. presidents, including the years each held office.

But I would like the same thing for the first five Canadian Prime Ministers. The difference being: each US president entered and left office only once; one of the first five Canadian Prime Ministers entered and left office multiple times.

How can we show multiple separate terms in office on any single given birth-to-death timeline?

For example, let's say Adams was in office for a second time (instead of Madison having been in office).

Currently in that example, Adams is given as

    {
      "label": "Adams",
      "born": -7389766800000,
      "died": -4528285200000,
      "enter": -5453884800000,
      "leave": -5327740800000
    }

Had history been somehow different such that Adams returned to office precisely when, if fact, Madison was in office, how would we specify that? Perhaps:

    {
      "label": "Adams",
      "born": -7389766800000,
      "died": -4528285200000,
      "enter": -5453884800000,
      "leave": -5327740800000,
      "enter": -5075280000000,
      "leave": -4822819200000
    },

Or maybe . . .

    {
      "label": "Adams",
      "born": -7389766800000,
      "died": -4528285200000,
      "presidencies" : [
        {"enter": -5453884800000, "leave": -5327740800000},
        {"enter": -5075280000000, "leave": -4822819200000}
      ]
    }

?

Or is it some other part of the Vega code that would have to change instead or in addition?

Thanks for any hints.


Solution

  • To have unlimited terms for each president, have a dataset "terms" with each record being a president's term of office:

      "data": [
        {
          "name": "people",
          "values": [
            {"label": "Washington", "born": -7506057600000, "died": -5366196000000},
            {"label": "Adams", "born": -7389766800000, "died": -4528285200000},
            {"label": "Jefferson", "born": -7154586000000, "died": -4528285200000},
            {"label": "Madison", "born": -6904544400000, "died": -4213184400000},
            {"label": "Monroe", "born": -6679904400000, "died": -4370518800000}
          ]
        },
    
       {
          "name": "terms",
          "values": [
            {"label": "Washington", "enter": -5701424400000, "leave": -5453884800000},
            {"label": "Adams", "enter": -5453884800000, "leave": -5327740800000},
            {"label": "Adams", "enter": -5175280000000, "leave": -5022819200000},
            {"label": "Adams", "enter": -4800000000000, "leave": -4700000000000},
            {"label": "Jefferson","enter": -5327740800000, "leave": -5075280000000},
            {"label": "Madison", "enter": -5075280000000, "leave": -4822819200000},
            {"label": "Madison", "enter": -4570358400000, "leave": -4300000000000},
            {"label": "Monroe", "enter": -4822819200000, "leave": -4570358400000}
          ]
        },
    

    For mark "rect", change the data source from "people" to "terms"

    {
          "type": "rect",
          "from": {"data": "terms"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "enter"},
              "x2": {"scale": "xscale", "field": "leave"},
              "y": {"scale": "yscale", "field": "label", "offset": -1},
              "height": {"value": 4},
              "fill": {"value": "#e44"}
            }
          }
        }
    

    View in Vega online editor

    enter image description here