Hi! I am currently trying to recreate the SandDance app example on https://sanddance.js.org/app/ within a Nuxt.js project.

When I try to facet by the chart and some data is in Japanese, the labels are not showing on top of each chart. Does this only work for the english alphabet?

First, I want to say thank you for this library; it looks like it has amazing potential, and could give many people the ability to explore their data.

That said, the documentation and examples seem to be non-existent; as a result, I'm finding it very difficult to get a simple example off the ground.

Here's the scenario I have; I have a set of data that I've downloaded/obtained from the server. It's a set of Javascript objects, but if necessary, I can get it from the server in JSON, CSV, whatever.

The desire is to take that data and make it available in an instance of the Sanddance explorer.

My thought is that it is as easy as creating an instance of Explorer and then passing the data along with column descriptors to it, but I can't seem to find a way to do that. The DataContent type implies there's some type to help provide and describe data, but I see no way of passing it to the Explorer instance.

Is there an example out there that shows how to do this?

Using the current version of SandDance for Power BI I cannot select a point/bar/mark in the sand dance visual and filter another chart on the same tab. I can select a bar on a non SandDance chart and it will filter the SandDance visual...but would like it to work the other way as well.

Hi ! I wonder why when I switch chart type to stacks, the chart does not show, the page has an error, as shown in the picture above. The installation package is installed through npm. version is as follows.

"@deck.gl/core": "^8.7.8", "@deck.gl/layers": "^8.7.8", "@fluentui/react": "^8.67.2", "@luma.gl/core": "^8.5.10", "@msrvida/sanddance": "^3.2.1", "@msrvida/sanddance-explorer": "^3.2.0", "vega": "^5.22.1", "react": "^16.12.0",

Hi Team,

I am trying to build sanddance-explorer package. Since this is a monorepo. I ran following commands:

npm install and npm run build

I am getting following error during build command:

1. Can I build only sanddance-explorer package rather than all other packages.?
2. How to run the sanddance-explore package?

Issue

Currently the tooltip is limited to only show key value pairs of the values you are hovering.

The component exposes a displayValue ( https://microsoft.github.io/SandDance/docs/sanddance/v3/interfaces/types.tooltipoptions.html ) option for the tooltip, however, that only gives you the ability to change the display value.

Furthermore, it does not support React components. If you pass a react component as the display value, it will render [object Object].

It would be ideal, if there was the ability to pass a custom component to the component. For instance:

<SandDanceReact
  data={data}
  viewerOptions={{
    tooltipOptions: {
      tooltip: (values) => {
        return <MyFancyTooltip {...values} />;
      }
    }
  }
/>

I realize the React component is only an abstraction over the vega and deck libraries which are not react specific either so this would need a little bit of magic to make it work.

I am currently trying to recreate the SandDance app example on https://sanddance.js.org/app/ within a Nuxt.js project.

I was able to figure out most of the functionalities, but I can't seem to find a solution for keeping the selection highlight (coloring of the cubes), when changing the chart type. At the moment, I use viewer.render to change the displayed graph, when updating the insight. So, after I select some data inside the graph, it highlights the selected data correctly. Then I click to change the chart type (using viewer.render with an updated insight), and the highlight disappears, but the selection still exists and is the same as before, because onSelectionChange isn't called

How does it work in the SandDance app example on https://sanddance.js.org/app/ to keep the selection highlight, when changing to a different chart type? Maybe I can find a solution, if I understand that.

Currently we are loading data through the mounted callback, calling load on the Explorer component and passing an array of objects.

It's clear that SandDance has some default logic for how to describe data; string values are categorical, numbers are quantifiable, etc. Additionally, I imagine that SandDance does things like encoding the string values into numbers in order to speed operations.

However, in loading the data ourselves, we probably have (or can store/extend) metadata about our data to assist SandDance in this (as well as correct any false assumptions).

As an example, if we have rows of data, like so:

{
    id: 1,
    description: 'some thing',
    otherId: 4,
    category: 'car'
}

In this case, we know the following:

• id is unique, it's self categorizing
• description is unique (let's assume) and a numeric representation is already encoded in id
• otherId is categorical, not quantitative, and we shouldn't allow aggregates on it
• category is categorical, and needs an encoding for it

That said, I see that there is a Column type in the TypeScript declarations which has some of that data (as well as min/max values, etc.). I also see that there is a DataContent interface which has the data and Column types exposed, and this looks promising.

The question is, are there options for us to actually help SandDance explorer with this decision, or are these default assumptions the only choice we have?

Hi Team,

When I upload the csv with less than 3 rows then chart type Stacks doesn't load in 3D mode, but with rows more than 3 rows is working fine.

This can be observed even on the demo site.

Any reason why this is not working for files less than 3 rows?

class SandDanceView extends React.Component {

render() {

    var insight = {
        columns: {
            color: 'price',
            sort: 'createTime',
            uid: 'buyOrderVolume',
            x: 'createTime',
            y: 'price',
            z: 'volume'
        },
        scheme: 'redblue',
        size: {
            height: 2500,
            width: 2000
        },
        chart: 'scatterplot',
        view: '3d'
    };
    

    return (
            <SandDanceReact insight={insight} data={data} />
    )

}

}

Hi all,

I'm trying out SandDanceReact for a project I'm working on, and am running into some difficulty figuring out how to use the component. Is it possible to pass in a Vega spec to the component, or am I limited to the predefined charts? If so, in what prop do I pass it in? I know that one of the examples did this, but it's unclear if the SandDanceReact component exposes vega-deck.gl.

Also, what props can modify or disable the default legend/sidebar?

Thanks for open sourcing this btw, it's a really cool project.

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I am charting whole number values along the X, Y and Z axes. It look like if there are less than about nine values the labels show spaces for decimal values. As an example if the data for the X axis contains values of 1, 2, 3, 4 and 5, the labels will be 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 and 5. This would be understandable if the data were real numbers, but they are integers. It would be nice if the chart did not add the extra spaces and labels when whole numbers are defined.

When is defined backgroundImage inside insights variable, doesn't load this image.

Example SandDance-app.html:

    <script>
        var themeColors = {
            "dark": {
                defaultCube: [128, 225, 255, 255]
            },
            "light": {
                defaultCube: [128, 225, 255, 255]
            }
        };
        var insights = {
            "secured": {
                "backgroundImage": {
                    "url": "data:image/png;base64,.....",
                    "size": {
                        "height": 1075,
                        "width": 643
                    },
                    "extents": {
                        "bottom": 48.8,
                        "left": -10.57,
                        "right": 2.1,
                        "top": 61.3
                    }
                },

It also happens when loading snapshots with backgroundImages defined in the json.