Bump Chart

Frame({}, [
  For(groupBy(newCarColors, "Year"), (d, key) =>
    StackY(
      {
        x: (key - 2000) * 30,
        spacing: 16,
        alignment: "start",
      },
      For(_.sortBy(d, "Rank"), (d) =>
        Ellipse({ w: 8, h: 8, fill: v(d.Color) }).name(`${d.Color}-${d.Year}`)
      )
    )
  ),
  For(groupBy(newCarColors, "Color"), (d) =>
    ConnectY(
      { strokeWidth: 2, mode: "center-to-center" },
      For(d, (d) => Ref(`${d.Color}-${d.Year}`))
    )
  ),
]).render(root, { w: 500, h: 300 });