Class: Graphistry

Graphistry

This object wraps a HTML IFrame of a Graphistry Visualization in order to provide an API for interacting with the graph.

Extends

Methods

(static) addColumns() → {Graphistry.<Array.<Column>>}

Add columns to the current graph visuzliation's dataset

Source:
Returns:

A Graphistry Observable that emits an Array of the new columns

Type
Graphistry.<Array.<Column>>
Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function(g) {
        window.g = g;
        const columns = [
            ['edge', 'highways', [66, 101, 280], 'number'],
            ['point', 'theme parks', ['six flags', 'disney world', 'great america'], 'string']
        ];
        console.log('adding columns', columns);
        return g.addColumns.apply(g, columns);
    })
    .subscribe();

(static) addExclusion(expr)

Add an exclusion to the visualization with the given expression

Parameters:
Name Type Description
expr string

An expression using the same language as our in-tool exclusion and filter panel

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('Adding exclusion for "point:degree > 0"');
        return g.addExclusion('point:degree > 0');
    })
    .subscribe();

(static) addFilter(expr)

Add a filter to the visualization with the given expression

Parameters:
Name Type Description
expr string

An expression using the same language as our in-tool exclusion and filter panel

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('Adding filter for "point:degree > 0"');
        return g.addFilter('point:degree > 0');
    })
    .subscribe();

(static) autocenter(percentile, cbopt)

Center the view of the graph

Parameters:
Name Type Attributes Description
percentile number

Controls sensitivity to outliers

cb function <optional>

Callback function of type callback(error, result)

Source:
To Do:
  • Implement this function
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('centering');
        return g.autocenter(.90);
    })
    .subscribe();

(static) encodeAxis(array)

Change axis

Parameters:
Name Type Description
array Array

of strings

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeAxis({})
    })
    .subscribe();

(static) encodeColor(graphTypeopt, attributeopt, variationopt, colorsopt)

Change colors based on an attribute

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

attribute Attribute <optional>

name of data column, e.g., 'degree'

variation Variant <optional>

If there are more bins than colors, use 'categorical' to repeat colors and 'continuous' to interpolate

colors Array <optional>

array of color name or hex codes

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeColor('point', 'degree', 'categorical', ['black', 'white'])
    })
    .subscribe();

(static) encodeIcons(graphTypeopt, attributeopt)

Change icons based on an attribute

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

attribute Attribute <optional>

name of data column, e.g., 'icon'

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeIcons('point', 'icon')
    })
    .subscribe();

(static) encodeSize(graphTypeopt, attributeopt)

Change size based on an attribute

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point'

attribute Attribute <optional>

name of data column, e.g., 'degree'

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeSize('point', 'community_infomap')
    })
    .subscribe();

(static) getCurrentWorkbook(cbopt)

Read the workbook ID

Parameters:
Name Type Attributes Description
cb function <optional>

Callback function of type callback(error, result)

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('getting workbook id');
        return g.getCurrentWorkbook();
    })
    .subscribe(function (workbook) {
        alert('id: ' + workbook.id)
    });

(static) labelUpdates() → {Observable.<Observable.<LabelEvent>>}

Get or create an Observable stream of all label updates from the visualization.

The Observable returned by this method emits inner Observables, where each inner Observable is tied to the lifetime of the label for which it was created.

For each label rendered in the visualization, the Observable returned by this method will create and emit a new inner Observable. The inner Observable will emit events when the label changes. For example, if the user clicks on the label, or the label changes position because of a pan/zoom, the inner Observable will emit an event.

The inner Observable for a label will complete if the label is removed from the screen.

Source:
Returns:

An Observable of inner {Observables}, where each inner Observable represents the lifetime of a label in the visualization.

Type
Observable.<Observable.<LabelEvent>>
Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('Listening for label updates');
        return g.labelUpdates();
    })
    .flatMap(function (labelUpdates) {
        return labelUpdates
            .do(function ({ id, tag, pageX, pageY }) {
                // prints messages like
                // > 'Label 13 added at (200, 340)'
                // > 'Label 74 updated at (750, 100)'
                console.log(`Label ${id} ${tag} at (${pageX}, ${pageY})`);
            })
            .takeLast(1)
            .do(function ({ id, pageX, pageY }) {
                console.log(`Label ${id} removed at (${pageX}, ${pageY})`);
            });
    })
    .subscribe();

(static) resetAxis()

Reset axis to value at page load

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeAxis()
        return g.resetAxis()
    })
    .subscribe();

(static) resetColor(graphTypeopt)

Reset color to value at page load

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeColor('point', 'degree', 'categorical', ['black', 'white'])
        return g.resetColor('point')
    })
    .subscribe();

(static) resetIcons(graphTypeopt)

Reset icons to value at page load

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point' or 'edge'

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeIcons('point', 'icon')
        return g.resetIcons('point')
    })
    .subscribe();

(static) resetSize(graphTypeopt)

Reset size to value at page load

Parameters:
Name Type Attributes Description
graphType GraphType <optional>

'point'

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.encodeSize('point', 'community_infomap')
        return g.resetSize('point')
    })
    .subscribe();

(static) saveWorkbook()

Save the current workbook. A saved workbook will persist the analytics state of the visualization, including active filters and exclusions

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        return g.saveWorkbook();
    })
    .subscribe();

(static) subscribeLabels() → {Subscription}

Subscribe to label change and exit events

Parameters:
Type Description
Object

An Object with onChange and onExit callbacks

Source:
Returns:

A Subscription that can be used to stop reacting to label updates

Type
Subscription

(static) tickClustering(ticks)

Run a number of steps of Graphistry's clustering algorithm

Parameters:
Name Type Description
ticks number

The number of ticks to run

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('starting to cluster');
        return g.tickClustering();
    })
    .subscribe();

(static) toggleHistograms(turnOnopt)

Toggle histogram panel

Parameters:
Name Type Attributes Description
turnOn boolean <optional>

Whether to make panel visible

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('opening histogram panel');
        return g.toggleHistograms(true);
    })
    .subscribe();

(static) toggleInspector(turnOnopt)

Toggle inspector panel

Parameters:
Name Type Attributes Description
turnOn boolean <optional>

Whether to make panel visible

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('opening inspector panel');
        return g.toggleInspector(true);
    })
    .subscribe();

(static) togglePanel(panelopt, turnOnopt)

Toggle a leftside panel

Parameters:
Name Type Attributes Description
panel string <optional>

Name of panel: filters, exclusions, scene, labels, layout

turnOn boolean <optional>

Whether to make panel visible, or turn all off

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
GraphistryJS(document.getElementById('viz'))
    .flatMap(function (g) {
        window.g = g;
        console.log('opening filters');
        return g.togglePanel('filters', true);
    })
    .subscribe();

(static) toogleToolbar(show)

Hide or Show Toolbar UI

Parameters:
Name Type Description
show boolean

Set to true to show toolbar, and false to hide toolbar.

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

Example
<button onclick="window.graphistry.toggleToolbar(false)">Hide toolbar</button>
<button onclick="window.graphistry.toggleToolbar(true)">Show toolbar</button>

(static) updateSetting(name, val)

Modify a settings value in the visualization

Available Settings Value Type
showToolbar boolean
pruneOrphans boolean
showArrows boolean
background color as hex or rgba string
edgeOpacity number (0 to 1)
edgeSize number (0.1 to 10)
pointOpacity number (0 to 1)
pointSize number (0.1 to 10)
zoom uint
center const 0
labelOpacity boolean
labelEnabled boolean
labelPOI boolean
labelHighlightEnabled boolean
labelColor color as hex or rgba string
labelBackground color as hex or rgba string
precisionVsSpeed int (-5 to +5)
Parameters:
Name Type Description
name string

the name of the setting to change

val string

the value to set the setting to.

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

(static) updateZoom(level, val)

Update the camera zoom level

Parameters:
Name Type Description
level number

Controls how far to zoom in or out.

val string

the value to set the setting to.

Source:
Returns:

Graphistry A Graphistry Observable that emits the result of the operation

subscribe(nextnullable, errornullable, completednullable) → {Subscription}

The subscribe method triggers the execution of the Observable, causing the values within to be pushed to a callback. An Observable is like a pipe of water that is closed. When subscribe is called, we open the valve and the values within are pushed at us. These values can be received using either callbacks or an Observer object.

Parameters:
Name Type Attributes Description
next Observable~nextCallback <nullable>

a callback that accepts the next value in the stream of values

error Observable~errorCallback <nullable>

a callback that accepts an error that occurred while evaluating the operation underlying the Observable stream

completed Observable~completeCallback <nullable>

a callback that is invoked when the Observable stream has ended, and the Observable~nextCallback will not receive any more values

Inherited From:
Source:
Returns:
Type
Subscription

(inner) lift(operator)

Creates a new Observable with this as the source, and the passed operator as the new Observable's operator.

Parameters:
Name Type Description
operator Operator

the operator defining the operation to apply to the Observable

Source:
Returns:

Observable a new Observable with the operator applied