Comments (7)
Hi @flowsipher,
On our examples page look for the links under the vega-deck.gl heading for demos on how to use that subsystem exclusively without any SandDance functionality. Then, go ahead and view-source on that page. When viewing the html source, you can click the links to the js files,
Yes, we expose the raw vega-deck.gl component statically in SandDance.VegaDeckGl
.
For example, in https://sanddance.js.org/tests/umd/js/vega-deck.gl.test.js we render a Vega spec like this:
SandDance.use(vega, deck, deck, luma);
var spec = { }; /// Vega spec goes here
var view = new SandDance.VegaDeckGl.ViewGl(vega.parse(spec), { getView: function () { return "2d"; } })
.renderer('deck.gl')
.initialize(document.querySelector('#vis'))
.run();
Here you see that our renderer uses the Vega View API.
Our renderer does not (yet) handle all types of Vega entities, currently we only render rects, lines, and text.
You can hide the legend/sidebar with CSS. try:
.sanddance-panel {
display: none;
}
Thanks for the feedback!
from sanddance.
Oh, just re-read your original question, and I see you are asking in context of SandDanceReact. Currently the vega-deck.gl isn't exposed on that wrapper. I think you could do that on your own by writing a small React wrapper, and doing the code from the comment above in your componentDidMount()
.
from sanddance.
Appreciate the quick reply, I got it working fairly quickly. Happy to share the wrapper for it when I finish up in the next few weeks.
As a follow up, I'm wondering how I can access the Deck.Gl View and pass in custom options to it. I'd like to pass in a custom controller. Would that be in the view property of Insight, or do I need to pass a custom deck instance to the Sanddance.use function?
from sanddance.
In your case I think a custom deck instance would do it. That's what I needed to do to have common state between my controller and deck, since deck creates Controllers by their class. See https://github.com/microsoft/SandDance/blob/master/packages/sanddance/src/vega-deck.gl/deck.gl-classes/deckgl.ts#L64 - its a lot of wrappers.
from sanddance.
Our renderer does not (yet) handle all types of Vega entities, currently we only render rects, lines, and text.
Any idea when you will support full Vega entitties?
from sanddance.
@MarcHKV can you let us know which entities you need?
I don't personally have the bandwidth to fully implement all the entities, but if others are willing to contribute I can help facilitate. Our vega-deck.gl code is currently embedded within the sanddance
package. If the community is interested in using it standalone, I can extract it and make it a separate package.
from sanddance.
Closing this issue for now, please re-open it as necessary.
from sanddance.
Related Issues (20)
- sending load message to the embed control should reset the snapshot list HOT 1
- The Direct color option is disabled and I have data with hex colors HOT 8
- Unable to visualize data HOT 3
- [bug] fontFamily viewerOptions doesn't work
- [feature request?] Hide y-axis/label only?
- [bug] backgroundColor doesn't apply globally for **some** colors
- Update or Create a SandDance PIP package to Use in Python Jupyter Notebooks in VSCode HOT 1
- Selecting facet as none after having a facet crashes Power BI
- Wrong z-axis scaling due to not switching to 3D in scatter plot HOT 8
- Unable to select items on Sandance after publishing as an App HOT 1
- Unable to add new sheet as a tooltip in SandDance
- Using a 16-digit ID for X-Axis is being trimmed or rounded HOT 2
- Z and Y axis mix up HOT 1
- Filters on SandDance for Stacks chart HOT 6
- SandDance Surface Chart
- Publish to open-vsx.org
- Selecting data on a graph is not reliable HOT 1
- sanddance in React breaking UI HOT 3
- Restore sand dance session from exported html HOT 1
- Float column with NULLs interpreted as categorical 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 sanddance.