Fail with Layered Spec about react-vega

[domoritz]

Could you provide an example that doesn't work?

[shenenya]

Try this: https://vega.github.io/vega-lite/examples/wheat_wages.html.

[domoritz]

I made a simple layered spec and it worked. Please provide more details about what doesn't work.

[shenenya]

Do you try layer spec with multi datasets? I modify the vegalite demo in react-vega as follows, which do not work.

const data1 = {
myData: [
{ a: "A", b: 20 },
{ a: "B", b: 34 },
{ a: "C", b: 55 },
{ a: "D", b: 19 },
{ a: "E", b: 40 },
{ a: "F", b: 34 },
{ a: "G", b: 91 },
{ a: "H", b: 78 },
{ a: "I", b: 25 }
]
};

const spec1 = {
description: "A simple bar chart with embedded data.",
layer: [
{
data: { name: "myData" },
encoding: {
x: { field: "a", type: "ordinal" },
y: { field: "b", type: "quantitative" }
},
mark: "bar"
}
]
};

[domoritz]

What does not work?

[shenenya]

I do not know. This is the result of spec as above.

[shenenya]

BTW. The following code works fine.

[domoritz]

Can you give me a fully working example including the call to React-Vega?

[shenenya]

Yes. Based on the demo https://github.com/vega/react-vega/tree/master/packages/react-vega-demo/stories, I only change the 'spec1' in file ReactVegaLiteDemo.jsx to:

const spec1 = { description: "A simple bar chart with embedded data.", layer: [ { data: { name: "myData" }, encoding: { x: { field: "a", type: "ordinal" }, y: { field: "b", type: "quantitative" } }, mark: "bar" } ] };

It failed.

If I change spec1 to follow, it work fine.

const spec1 = { description: "A simple bar chart with embedded data.", layer: [ { data: { values: [ { a: "A", b: 28 }, { a: "B", b: 55 }, { a: "C", b: 43 }, { a: "D", b: 91 }, { a: "E", b: 81 }, { a: "F", b: 53 }, { a: "G", b: 19 }, { a: "H", b: 87 }, { a: "I", b: 52 } ] }, encoding: { x: { field: "a", type: "ordinal" }, y: { field: "b", type: "quantitative" } }, mark: "bar" } ] };

[domoritz]

The second example explicitly provides the data. Can you start debugging there? I don’t think the problem is layering.

[shenenya]

I think the problem comes from that react-vega or vega-embed do not deal with input data correctly in layered chart. But I am not sure, and I do not know how to debug that.

[domoritz]

Vega-Embed definitely supports multiple datasets. @kristw could help with how we handle multiple datasets in react vega.

[kristw]

See #66

[shenenya]

Great. Looking forward to the next release with this feature.