Can't get the simple examples to work #27
Description
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>