Can't get the simple examples to work

beingkk commented 2 years ago

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/gemini@v0.1-alpha/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>

declann commented 1 year ago

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

declann commented 1 year ago

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.

declann commented 1 year ago

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.

declann commented 2 months ago

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

uwdata / gemini

Can't get the simple examples to work #27