教程：开发者使用Graphistry#

首先在分析教程中生成交互式图表

Graphistry 是一个客户端/服务器系统：

图表类似于实时文档：它们在服务器上创建（一个dataset），然后用户可以与之交互
上传可能提供一些设置
用户可以动态创建设置，例如过滤器：这些是workbooks。多个workbooks可以重复使用相同的dataset

APIs:

后端API
- Python
- REST
- NodeJS
前端API
- iframe
- React
- JavaScript

[4]:

import graphistry

# To specify Graphistry account & server, use:
# graphistry.register(api=3, username='...', password='...', protocol='https', server='hub.graphistry.com')
# For more options, see https://github.com/graphistry/pygraphistry#configure

1. 后端API#

Graphistry 提供了一个 REST 上传 API，您可以重复使用 Python 客户端以更方便地使用它。

Python#

使用PyGraphistry API，如分析教程所示
不进行绘图，而是获取用于嵌入的绘图URL

[34]:

edges = [{'src': 0, 'dst': 1}, {'src': 1, 'dst': 0}]

g = graphistry.edges(pd.DataFrame(edges)).bind(source='src', destination='dst').settings(url_params={'play': 1000})

url = g.plot(render=False)

url

[34]:

u'https://hub.graphistry.com/graph/graph.html?dataset=PyGraphistry/D1I2OZFIZR&type=vgraph&viztoken=1b70c86e6b6f357d435dce80bf37c42ce284c6ae&usertag=86f11264-pygraphistry-0.9.63&splashAfter=1554622313&info=true&play=1000'

REST#

示例CURL如下
从您的个人资料页面获取API密钥，或者对于管理员，通过生成一个新的

[1]:

json_data = {
    "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}
    ]
}

import json
with open('./data/samplegraph.json', 'w') as outfile:
    json.dump(json_data, outfile)

[2]:

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

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

NodeJS#

请参阅 [@graphistry/node-api](https://graphistry.github.io/graphistry-js/node-tsdocs/) 文档

2. 前端API#

Graphistry 支持 3 种前端 API：iframe、React 和 JavaScript

iframe#

[27]:

from IPython.display import HTML, display

#skip splash screen
url = url.replace('splashAfter', 'zzz')

display(HTML('<iframe src="' + url + '" style="width: 100%; height: 400px"></iframe>'))

JavaScript - 浏览器原生JS#

npm
npm install --save "@graphistry/client-api"
参见 vanilla js examples]
尝试使用 RunKit

JavaScript API 使用 RxJS Observables。图标通过 Font Awesome 4 提供。

var pointIconEncoding = {
    attribute: 'type',
    mapping: {
       categorical: {
           fixed: {
               'Page': 'file-text-o',
               'Phone': 'mobile',
               'Email': 'envelope-o',
               'Instagram': 'instagram',
               'Snapchat': 'snapchat',
               'Twitter': 'twitter',
               'Location': 'map-marker',
           }
       }
    }
};

var pointColorEncoding = {
    attribute: 'type',
    mapping: {
       categorical: {
           fixed: {
               'Page': '#777777',
               'Phone': '#f8999e',
               'Email': '#c05c61',
               'Username': '#00AA00',
               'Instagram': '#a43cb1',
               'Snapchat': '#fffb2e',
               'Twitter': '#46a6e4',
               'Location': '#9c4e00',
               'Facebook': '#3f5692',
               'Telegram': '#37aee2'
           },
          'other': '#cccccc'
       }
    }
};

document.addEventListener("DOMContentLoaded", function () {

    GraphistryJS(document.getElementById('viz'))
        .flatMap(function (g) {
            window.g = g;
            g.updateSetting('pointSize', 3);
            g.encodeIcons('point', 'type', pointIconEncoding.mapping);
            return g.encodeColor('point', 'type', 'categorical', pointColorEncoding.mapping);
        })
        .subscribe(function (result) {
            console.log('all columns: ', result);
        }, function(result) {
            console.log('error', result);
        });
});

JavaScript React#

React API 封装了 JavaScript API。

npm
npm install --save "@graphistry/client-api-react"
查看 examples
查看示例 CRA 项目
参见 options

import { Graphistry } from '@graphistry/client-api-react';

<Graphistry
    key={react_nonce}
    className={'my_class'}
    vizClassName={'my_class_2'}

    defaultPointsOfInterestMax={20}
    defaultPruneOrphans={true}
    defaultShowPointsOfInterest={true}
    defaultShowPointsOfInterestLabel={false}
    backgroundColor={'#EEEEEE'}
    defaultPointSize={1}
    defaultDissuadeHubs={true}
    defaultGravity={8}
    defaultScalingRatio={12}
    defaultEdgeOpacity={0.5}
    defaultShowArrows={false}
    defaultEdgeCurvature={0.02}
    defaultShowLabelPropertiesOnHover={true}
    ...
    play={2000}
    showIcons={true}
    defaultShowToolbar={true}
    axes={axes}
    controls={controls}
    type={datasetType}
    dataset={datasetName}
    graphistryHost={'http://...'}
    loadingMessage={'loading..'}
    showLoadingIndicator={true}
/>

[ ]:

教程：开发者的Graphistry指南

目录