Bubbles on a 'timeline'

Hey Louis66. Here's my spin on the circle timeline. Now this one was way trickier than I thought it'd be. I'm sure someone out there could find a better implementation; I had to do some workarounds to get it to work (e.g. use a rect mark instead of an arc or circle). You'll also need to transform your data before putting it into Deneb.

Take a look and let me know your thoughts. If this meets the requirement, consider marking this as the solution.

Gist: https://vega.github.io/editor/#/gist/540669549e03f852075e5fcac91f16c2/spec.json
Spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "params": [
    {"name": "min_adj_pos", "expr": "data('data_0')[0]['min_adj_pos']"},
    {"name": "max_adj_pos", "expr": "data('data_0')[0]['max_adj_pos']"},
    {"name": "color_scheme", "expr": "'tableau20'"},
    {
      "name": "pill_path",
      "expr": "'m 64.920826,87.413086 h 92.524964 c 14.1599,0 25.55938,14.249354 25.55938,31.949234 0,17.69986 -11.39948,31.94922 -25.55938,31.94922 H 64.920826 c -14.159896,0 -25.55938,-14.24936 -25.55938,-31.94922 0,-17.69988 11.399484,-31.949234 25.55938,-31.949234 z'"
    },
    {"name": "pill_xOffset", "expr": "-33"},
    {"name": "pill_yOffset", "expr": "-36"}
  ],
  "data": {
    "name": "dataset",
    "values": [
      {"index": 1, "r": 0},
      {"index": 2, "r": 0},
      {"index": 3, "r": 2},
      {"index": 4, "r": 0},
      {"index": 5, "r": 3},
      {"index": 6, "r": 0},
      {"index": 6, "r": 1},
      {"index": 6, "r": 4},
      {"index": 7, "r": 5},
      {"index": 8, "r": 0},
      {"index": 9, "r": 0},
      {"index": 10, "r": 2},
      {"index": 10, "r": 4},
      {"index": 11, "r": 7},
      {"index": 12, "r": 0}
    ]
  },
  "transform": [
    {
      "window": [{"op": "dense_rank", "as": "index_dr"}],
      "sort": [{"field": "index"}]
    },
    {
      "calculate": "datum['r']<= 0 ? 0 : datum['index']-datum['r']",
      "as": "adj_min_pos"
    },
    {
      "calculate": "datum['r']<= 0 ? 0 : datum['index']+datum['r']",
      "as": "adj_max_pos"
    },
    {
      "joinaggregate": [
        {"op": "min", "field": "adj_min_pos", "as": "min_adj_pos"},
        {"op": "max", "field": "adj_max_pos", "as": "max_adj_pos"}
      ]
    },
    {
      "calculate": "(datum['max_adj_pos']-datum['min_adj_pos'])/2",
      "as": "median_adj_pos"
    }
  ],
  "spacing": 0,
  "vconcat": [
    {
      "width": 800,
      "height": 800,
      "encoding": {
        "x": {
          "field": "index",
          "type": "quantitative",
          "scale": {
            "domain": [{"expr": "min_adj_pos"}, {"expr": "max_adj_pos"}]
          },
          "axis": null
        },
        "y": {
          "field": "index",
          "type": "quantitative",
          "scale": {
            "domain": [{"expr": "min_adj_pos"}, {"expr": "max_adj_pos"}]
          },
          "axis": {"tickCount": {"expr": "max_adj_pos-min_adj_pos"}}
        }
      },
      "layer": [
        {
          "encoding": {
            "color": {
              "field": "index",
              "scale": {"scheme": {"expr": "color_scheme"}},
              "legend": null
            }
          },
          "transform": [
            {"calculate": "width", "as": "width"},
            {"calculate": "datum['median_adj_pos']-datum['r']", "as": "y"},
            {"calculate": "datum['median_adj_pos']+datum['r']", "as": "y2"}
          ],
          "layer": [
            {
              "description": "circles",
              "mark": {
                "type": "rect",
                "opacity": 1,
                "cornerRadius": 9000000000,
                "strokeWidth": 1,
                "fillOpacity": 0
              },
              "encoding": {
                "stroke": {
                  "field": "index",
                  "scale": {"scheme": {"expr": "color_scheme"}},
                  "legend": null
                },
                "x": {"field": "adj_min_pos", "type": "quantitative"},
                "x2": {"field": "adj_max_pos"},
                "y": {"field": "y", "type": "quantitative", "axis": null},
                "y2": {"field": "y2"}
              }
            },
            {
              "layer": [
                {
                  "transform": [
                    {"filter": "datum['r']>0"},
                    {
                      "window": [
                        {"op": "dense_rank", "as": "dr_index_updated"}
                      ],
                      "sort": [{"field": "index"}]
                    },
                    {
                      "calculate": "datum['dr_index_updated']%2",
                      "as": "alternate"
                    },
                    {
                      "calculate": "datum['alternate'] == 1 ? datum['y'] : datum['y2']",
                      "as": "y"
                    }
                  ],
                  "description": "vertical lines",
                  "mark": {
                    "type": "rule",
                    "opacity": 1,
                    "strokeWidth": 1,
                    "fillOpacity": 0,
                    "strokeDash": [5, 5]
                  },
                  "encoding": {
                    "stroke": {
                      "field": "index",
                      "scale": {"scheme": {"expr": "color_scheme"}},
                      "legend": null
                    },
                    "x": {"field": "index", "type": "quantitative"},
                    "x2": {"field": "index"},
                    "y": {"field": "y", "type": "quantitative", "axis": null},
                    "y2": {"field": "median_adj_pos"}
                  }
                },
                {
                  "description": "line label background (color)",
                  "transform": [{"filter": "datum['r']>0"}],
                  "mark": {
                    "type": "point",
                    "shape": {"expr": "pill_path"},
                    "xOffset": {"expr": "pill_xOffset"},
                    "yOffset": {"expr": "pill_yOffset"}
                  },
                  "encoding": {
                    "x": {"field": "index", "type": "quantitative"},
                    "y": {
                      "field": "median_adj_pos",
                      "type": "quantitative",
                      "axis": null
                    },
                    "size": {"value": 0.35}
                  }
                },
                {
                  "description": "line label background (white)",
                  "transform": [{"filter": "datum['r']==0"}],
                  "mark": {
                    "type": "point",
                    "shape": {"expr": "pill_path"},
                    "xOffset": {"expr": "pill_xOffset"},
                    "yOffset": {"expr": "pill_yOffset"}
                  },
                  "encoding": {
                    "x": {"field": "index", "type": "quantitative"},
                    "y": {
                      "field": "median_adj_pos",
                      "type": "quantitative",
                      "axis": null
                    },
                    "size": {"value": 0.35},
                    "color": {"value": "white"}
                  }
                },
                {
                  "description": "line labels",
                  "transform": [
                    {
                      "window": [{"op": "row_number", "as": "dr_index_rn"}],
                      "groupby": ["index"]
                    },
                    {"filter": "datum['dr_index_rn'] == 1"}
                  ],
                  "mark": {
                    "type": "text",
                    "opacity": 1,
                    "stroke": "gray",
                    "filled": false,
                    "strokeOffset": {"expr": "1"},
                    "fontSize": 18,
                    "align": "center"
                  },
                  "encoding": {
                    "text": {"field": "index"},
                    "x": {"field": "index", "type": "quantitative"},
                    "y": {
                      "field": "median_adj_pos",
                      "type": "quantitative",
                      "axis": null
                    }
                  }
                }
              ],
              "resolve": {"legend": {"color": "independent"}}
            }
          ]
        }
      ]
    }
  ],
  "resolve": {"axis": {"x": "shared"}, "scale": {"x": "shared"}}
}

dm-p, would love to get your thoughts on how you'd implement this one. Probably would be more suitable for Vega instead of Vega-Lite.

Djeez - this is something ! Good job !