@msrvida/sanddance-explorer NPM

@msrvida/sanddance-explorer

Visually explore, understand, and present your data.

Installation

Add these to the dependencies section of your package.json, then run npm install:

"@msrvida/sanddance-explorer": "^4",
"@fluentui/react": "^8",
"vega": "^5.25"

Import these in your JavaScript:

import * as fluentui from '@fluentui/react';
import * as vega from 'vega';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Explorer, use } from '@msrvida/sanddance-explorer';

//quickstart: use the included stylesheet
import "@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css"

/*
  in your own stylesheet, you can modify the sanddance-explorer class to fit your needs.
  Example:

.sanddance-explorer {
  height: 800px;
}

*/

fluentui.initializeIcons();

use(fluentui, React, ReactDOM, vega);

const data = [
  { a: 1, b: "c1" },
  { a: 1, b: "c2" },
  { a: 2, b: "c3" },
  { a: 3, b: "c4" }
];

const explorerProps = {
    logoClickUrl: 'https://microsoft.github.io/SandDance/',
    mounted: explorer => {
        explorer.load(data);
    }
};

ReactDOM.render(React.createElement(Explorer, explorerProps), document.getElementById('app'));