Comments (14)
Could you provide an example that doesn't work?
from react-vega.
Try this: https://vega.github.io/vega-lite/examples/wheat_wages.html.
from react-vega.
I made a simple layered spec and it worked. Please provide more details about what doesn't work.
from react-vega.
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"
}
]
};
from react-vega.
What does not work?
from react-vega.
I do not know. This is the result of spec as above.
from react-vega.
BTW. The following code works fine.
from react-vega.
Can you give me a fully working example including the call to React-Vega?
from react-vega.
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" } ] };
from react-vega.
The second example explicitly provides the data. Can you start debugging there? I don’t think the problem is layering.
from react-vega.
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.
from react-vega.
Vega-Embed definitely supports multiple datasets. @kristw could help with how we handle multiple datasets in react vega.
from react-vega.
See #66
from react-vega.
Great. Looking forward to the next release with this feature.
from react-vega.
Related Issues (20)
- builds try to import a missing prop-types dependency HOT 11
- Infinite requests when the loader prop is passed
- Unable to highlight the vega chart from outside vega component
- Out of date CHANGELOG.md HOT 1
- Replace travis with GitHub actions HOT 2
- Dark theme does not pass on to signals or text marks HOT 1
- Unable to embed vega-lite visualization in react HOT 2
- When will react-vega migrate to react 18 HOT 2
- Re-rendering with className causes react-embed to lose styling
- Approach#1 in your documentation is not working HOT 5
- Setting height to "container" (i.e. responsive sizing) does not work as expected HOT 1
- Support for newer typescript version
- Generated Charts passing in data as an attribute messes up title ... extra space at top - pie chart
- Will the VegaLite component re-render on spec change? HOT 1
- Is it possible to use [email protected] with react native?
- [Security issue] - CVE-2022-25883-semver HOT 1
- Provide a more beginner-friendly documentation
- [Question] Does it support server side rendering? HOT 1
- Open links in a new window
- Fit vertically-concatenated Vega-Lite (react-vega) visualization to container size, and keep the interactive brush feature HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vega.