Skip to content

Stringline

ts
const caltrainProcessed = caltrain.filter((d) => d.Type !== "Bullet");

        Frame({}, [
    StackY(
      {
        spacing: 8,
        alignment: "start",
      },
      For(
        groupBy(
          _.orderBy(caltrainProcessed, (d) => caltrainStopOrder.indexOf(d.Station), "desc"),
          "Station"
        ),
        (d, key) =>
          Frame({ key }, [
            Rect({ w: 0, h: 0 }),
            For(d, (d) =>
              Ellipse({ x: d.Time / 3, w: 4, h: 4, fill: v(d.Direction) }).name(`${d.Train}-${d.Station}-${d.Time}`)
            ),
          ])
      )
    ),
    For(groupBy(caltrainProcessed, "Train"), (d) =>
      ConnectY(
        { strokeWidth: 1, mode: "center-to-center" },
        For(d, (d) => Ref(`${d.Train}-${d.Station}-${d.Time}`))
      )
    ),
  ]).render(root, { w: 500, h: 400 });