UI Guides

- UI Basics

- Filters & Exclusions

- Histograms

- Tips & Tricks


Graphistry Setup

- Admin Setup

- Notebook Setup Tutorial (PyGraphistry)


REST API's

- REST API Documentation 0.9.2

About

- Introduction


Embed Visualizations

- HTML

- URL Options

- Iframe CSS Style Tips


Upload Data

- JSON Format

- Edge Attributes

- Node Attributes

- Extended Color Pallates

- REST JSON API

- Curl Example


Language Bindings

- Scal: Spark & GraphX

- NodeJS

- Python


Integrate

- Splunk

- Zepplin Spark Notebooks

- Ipython & Jupyter Notebooks


- Workbook REST API Documentation



Python Libraries (Notebooks & API)

- PyGraphistry Project

- PyGraphistry API Docs

- Ipython & Jupyter Notebook Examples


Javascript Libraries

- GraphistryJS API Docs

- GraphistryJS Examples

- GraphistryJS React Component




REST API Documentation 0.9.2n


Introduction

Upload your graph and then visually explore it:

For Analysts: visually upload your data using Splunk or programmatically from your scripts and notebooks. Get back a url, or in visual environments, see and interact with the result immediately.

For Developers: upload a graph through our REST API or copy them to your own servers, and then embed an iframe that links to it. Customize using URL parameters.

We support several formats. For programmatic use, our API supports a simple JSON format and fast protobufs. For additional formats such as CSV, use an integration such as Splunk to convert it. In both cases, graphs are described by two dataframes: a table of edges with optional data and style attributes, and a table of nodes also with optional data and style attributes.

Embed Visualizations

HTML

Given a dataset name or URL, such as Miserables:

  • URL: https://labs.graphistry.com/graph/graph.html?dataset=Miserables
  • HTML: <iframe src="https://labs.graphistry.com/graph/graph.html?dataset=Miserables"></iframe>

When providing a protobuf URL instead of a name, take care to URI encode it.

Our most popular configuration is:

<iframe
  src="https://labs.graphistry.com/graph/graph.html?dataset=Miserables"
  style="border: 1px solid black; width: 100%; height: 100%; min-height: 400px"
></iframe>

URL options

Add parameters to the end of the URL to manipulate the visualizations. For additional inputs or outputs, please email tips@graphistry.com.

Hide menus

Add ...&menu=false to disable the toolbar/menus.

Show graph size

Add ...&info=true to show graph size.

Override background color

Add ...&bg=%23FFFFFF to turn the background color white, corresponding to hex color code #FFFFFF. Replace FFFFFF with any other 6-character hex color code. (The prefix %23 is the url-encoded representation of #.)

Stop or control initial auto-layout duration

Add ...&play=1000, to run auto-layout for 1000 milliseconds on page-load. To prevent auto-layout, define initial x and y positions as graph attributes (or by forking within a laid out visualization) and set play to 0.

Control the viewport

The following parameters are mainly informative and used by tools like export to record and adjust the viewing bounds for publication. They may be adjusted textually but we recommend panning and zooming and then re-exporting to achieve this functionality.

  • ...&left=-1.0 (floating point) controls the left-most coordinate as a fraction of the visualization's full layout.
  • ...&right=1.0 (floating point) controls the right-most coordinate.
  • ...&top=-1.0 (floating point) controls the top coordinate.
  • ...&bottom=1.0 (floating point) controls the bottom coordinate.

IFrame CSS style tips

Control the HTML style by adding style attributes: <iframe style="border: 1px solid black; width: 100%; height: 80%; min-height: 400px" src=...

Control the border:

border: 1px solid black

Control the size:

width: 100%; height: 80%; min-height: 400px

Upload Data

JSON Format

The JSON file specifies a list of graph nodes, a list of edges, and the style. Each node and edge may provide user-defined data fields, and our system provides several optional predefined ones.

samplegraph.json:

{
    "name": "myUniqueGraphName",
    "type": "edgelist",
    "bindings": {
        "sourceField": "src",
        "destinationField": "dst",
        "idField": "node"
    },
    "graph": [
      {"src": "myNode1", "dst": "myNode2",
       "myEdgeField1": "I'm an edge!", "myCount": 7},
      {"src": "myNode2", "dst": "myNode3",
        "myEdgeField1": "I'm also an edge!", "myCount": 200}
    ],
    "labels": [
      {"node": "myNode1",
       "myNodeField1": "I'm a node!",
       "pointColor": 5},
      {"node": "myNode2",
       "myNodeField1": "I'm a node too!",
       "pointColor": 4},
      {"node": "myNode3",
       "myNodeField1": "I'm a node three!",
       "pointColor": 4}
    ]
}

Edge Attributes

  • src: string or number
  • dst: string or number
  • edgeTitle: html string
  • edgeLabel: html string
  • edgeWeight: float

Node Attributes

  • node: string or number
  • pointTitle: html
  • pointLabel: html
  • pointSize: float
  • pointColor: int 0-11
    0 1 2 3 4 5 6 7 8 9 10 11

Extended Color Palette

See extended color list:

REST JSON API

Send a POST request to https://labs.graphistry.com/etl?key=.... with your graph in our JSON format. Graphs provide unique names which you can then pass to the HTML viewer's URL.

Curl example

Command: curl -H "Content-type: application/json" -X POST -d @samplegraph.json https://labs.graphistry.com/etl?key=YOUR_API_KEY_HERE

Response: {"success":true,"dataset":"myUniqueGraphName"}

View: https://labs.graphistry.com/graph/graph.html?datasetname=myUniqueGraphName

Language Bindings

Contact info@graphistry.com for current versions of the below.

Scala: Spark & GraphX

Contact info@graphistry.com for a sample Zeppelin notebook.

NodeJS

Stub
var request = require('request');

//jsonGraph * (err? -> ())? -> ()
function upload (data, cb) {
    cb = cb || function (err, data) {
        if (err) {
            return console.error('exn', err);
        } else {
            return console.log('url: https://labs.graphistry.com/graph/graph.html?dataset=' + data.dataset);
        }
    };

    var options = {
        uri: 'https://labs.graphistry.com/etl?key=' + YOUR_API_KEY_HERE,
        method: 'POST',
        json: data
    };

    request(options,
        function (err, resp, body) {
            return cb(err, body);
        });
}

Python

Our bindings integrate with Pandas dataframes, igraph and NetworkX algorithms, the pip package manager, and notebooks such as Juypter (IPython). The basic idea is to provide a dataframe of edges, optionally a dataframe of nodes, and bindings between dataframe columns and visual attributes. The library will upload the dataframes to the visualization server and return the url to an embeddable interactive webpage. New node and edge attributes can be computed using python, pandas, networkx, and igraph.

For convenience, attribute bindings are chainable immutable objects. This streamlines creating a graph as a variant of the previous one. Bindings are defined and overriden using method bind.

Install

pip install "graphistry[all]"

Run (Minimal)

Given edgelist dataframe df with columns user and sku, call:
import pandas
import graphistry
graphistry.register(key='email pygraphistry@graphistry.com for a key')

df = pandas.DataFrame([[0,1,5],[0,2,10]], columns=['user','sku','count'])
g = graphistry.bind(source='user', destination='sku')
g = g.graph(df)
g.plot()

Edges dataframe

The edges dataframe has the same required and optional columns as in the JSON edge format.

Define edge attribute bindings with method bind(source=attr_name, destination=attr_name, ...), and load the actual data with call plot(graph=my_edges_dataframe). Optionally, change the column bindings by overriding these keyword parameters: source, destination, edge_title, edge_label edge_weight.

Ex:
g = g.bind(edge_title='count')
g.plot()

Nodes dataframe

The optional nodes dataframe has the same required and optional columns as in the JSON node format. If the nodes dataframe is not provided, it will be inferred from the edge dataframe's sources and destinations. Specify node attribute bindings with method bind(node=attr_name, ...), and load the actual node data with call plot(nodes=my_nodes_dataframe).

Optionally, change the column bindings by overriding these keyword parameters: point_title, point_label, point_size, point_color.

Ex:
labels = pandas.DataFrame([[0,100],[1,100],[2,30]], columns=['nodeid','cost'])
labeled_g = g.bind(node='nodeid', point_size='cost').nodes(labels)
labeled_g.plot()

Combining pandas with igraph

Graphs can be moved from pandas into igraph for analysis and then back to pandas for plotting. Helpfully, attribute bindings will be remembered.

Ex: Convert pandas dataframe to igraph graph, compute properties, and directly plot:

ig = g.pandas2igraph(df)
ig.vs['pagerank'] = ig.pagerank()
ig.vs['community'] = ig.community_infomap().membership
g = g.bind(point_color='community', point_size='pagerank')
g.plot(ig)
The dataframe can be recovered as well:
(i_edges, i_nodes) = g.igraph2pandas(ig)
g.plot(graph=i_edges, nodes=i_nodes)

Integrate

Contact info@graphistry.com for current versions of the below.

Splunk

Zepplin Spark Notebooks

IPython & Juypter Notebooks

Install

Install Juypter (IPython):
pip install "ipython[notebook]"
Then, follow the Python instructions













.