Graphistry's JavaScript Client API
Graphistry's client-side interactions API makes it easy for developers to interact with embedded graph visualizations.
Installation
The JS package supports commonjs, esm, and iffe formats. See package.json for dist/
folder contents.
The rxjs
version is an unpinned peer dependency:
- The bundled versions
dist/index.{cjs,esm,iife}.min.js
keep rxjs
as an external package
- The bundled versions
dist/index.full.{cjs,esm,iife}.min.js
include it
- Use
dist/index.full.iife.min.js
for <script src="..."/>
tags
Docs
- To use this interactions API, call GraphistryJS with an IFrame containing a graphistry vizualization
- See client-api (interactive storybook docs)
- Refer to the Graphistry class for a list of the methods currently supported. More on the way!
- Refer to example in GraphistryJS
See also the @graphistry/client-api-react React docs
Import
Depending on the module format, you may use import
, require
, and window.GraphistryModule
:
const G = GraphistryModule;
const g = G.graphistryJS(elt);
import { graphistryJS } from '@graphistry/client-api';
const g = graphistryJS(elt);
const G = require('@graphistry/client-api');
const g = G.graphistryJS(elt);
Dual usage modes
The library exposes two calling conventions to choose from.
RxJS orchestrations
const G = GraphistryModule;
document.addEventListener("DOMContentLoaded", function () {
var g = G.graphistryJS(document.getElementById('viz'));
var sub = g.pipe(
G.tap(() => console.log('GraphistryJS ready instance as window.g')),
G.delay(5000),
G.addFilter('point:degree > 1'),
G.updateSetting('background', '#FF0000')
)
.subscribe(
function () {},
function (err) { console.error('exn on setup', err); },
function () { console.log('finished setup'); });
//Optional: sub.unsubscribe() to cancel
});
Async commands
const G = GraphistryModule;
document.addEventListener("DOMContentLoaded", function () {
var g = G.graphistryJS(document.getElementById('viz'));
g.pipe(
G.tap(() => {
//non-rxjs on ready g
console.log('GraphistryJS ready instance as window.g');
setTimeout(
() => {
g.addFilter();
g.updateSetting('background', '#FF0000');
},
5000);
}))
.subscribe();
});