gemini Can't get the simple examples to work

Hey, I'm trying to use and adjust the example provided in the readme, but it unfortunately does not work on my mac: It only shows one of the charts (sSpec) and does not animate (code attached below).

These simple examples on Observable also do not work for me (also this one with the Play button), which makes wonder if it's something else than just a bug in my code...

The examples in the gemini editor however work very well! Perhaps I'm missing something very obvious - would appreciate any advice.

Also, this is a really cool project, thank you so much for developing gemini!

The html code I'm trying out:

<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/uwdata/[email protected]/gemini.web.js"></script>

</head>
<body>
  <div id="view"></div>
  <script>

  const gemSpec = {
    "timeline": {
      "sync": [
        {"component": {"axis": "x"}, "timing": {"duration": 1000}},
        {"component": {"mark": "marks"}, "timing": {"duration": 1000}}
      ]
    }
  };
  const data = { values: [{"Hungry": 50, "Name": "Gemini"}, {"Hungry": 100, "Name": "Cordelia"}] };
  const data2 = { values: [{"Hungry": 100, "Name": "Gemini"}, {"Hungry": 100, "Name": "Cordelia"}] };

  const sSpec = {
    data: data,
    mark: "bar",
    encoding: {
      x: { field: "Hungry", type: "quantitative"},
      y: { field: "Name", type: "nominal"}
    }
  }
  const eSpec = {
    data: data2,
    mark: "bar",
    encoding: {
      x: { field: "Hungry", type: "quantitative"},
      y: { field: "Name", type: "nominal"}
    }
  }
 
  vegaEmbed("#view", sSpec, {renderer: "svg"})
  async function play() {
    let anim = await gemini.animate(sSpec, eSpec, gemSpec);
    await anim.play("#view")
  }

  </script>
</body>

Sep 13 '22 15:09 beingkk

+1 On Observable examples. It would be awesome to get gemini working on OHQ

May 12 '23 15:05 declann

My error on OHQ is about an unrecognised function: bandwidth.

This is coming from vega-expression code.

https://vega.github.io/vega/docs/expressions/#bandwidth

The function is used in the vega spec when I pull it into vega editor: "height": {"signal": "max(0.25, bandwidth('y'))"}

This is generated by gemini.vl2vg4gemini, but I don't see anything wrong with it.

May 12 '23 15:05 declann

There is test code in animationSequence.html in the test folder. This is working for me with changes in my fork: https://github.com/declann/gemini

Example specs aren't consistent. Some use "charts" key instead of "sequence", so I can't easily get all the examples to run, but usually working with little refactoring. Mainly, my own examples are working now. In future I may want this in Observable, and will report if I make progress.

This does appear to be really handy when it is working.

May 13 '23 17:05 declann

Working (again) on OHQ - see collection.

Issue was gemini will only work with vega lite 4 (on v5 we get bandwidth errors). But gemimi.web.js is fetching latest vega-lite whenever it doesn't find window.vl (I guess): that means v5. I made a fork which instead bundles vega-lite 4, and using that it's working again in OHQ (we can't set window.vl in OHQ: in the past it might have been possible)

https://observablehq.com/@declann/hello-gemini-again

Jul 04 '24 20:07 declann