Line Chart

gf.frame([
    ..._(streamgraphData)
      .groupBy("c")
      .flatMap((items, c) =>
        items.map((d, i) =>
          gf.ellipse({
            name: `${c}-${i}`,
            x: gf.value(d.x, "x"),
            y: gf.value(d.y, "y"),
            w: 2,
            h: 2,
            fill: gf.value(c, "color"),
          })
        )
      )
      .value(),
    ..._(streamgraphData)
      .groupBy("c")
      .map((items, c) =>
        gf.connectX(
          {
            interpolation: "linear",
            // opacity: 0.7,
            mode: "center-to-center",
            strokeWidth: 3,
          },
          items.map((d) => gf.ref(`${c}-${d.x}`))
        )
      )
      .value(),
  ]).render(root, { w: 500, h: 300 });