Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't get the simple examples to work #27

Open
beingkk opened this issue Sep 13, 2022 · 4 comments
Open

Can't get the simple examples to work #27

beingkk opened this issue Sep 13, 2022 · 4 comments

Comments

@beingkk
Copy link

beingkk commented Sep 13, 2022

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
Copy link

declann commented May 12, 2023

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

@declann
Copy link

declann commented May 12, 2023 •
edited
Loading

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
Copy link

declann commented May 13, 2023

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
Copy link

declann commented Jul 4, 2024 •
edited
Loading

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

@declann declann mentioned this issue Jul 4, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@declann @beingkk