in showcases/graph/app.js [22:99]
constructor(props) {
super(props);
this._resize = this._resize.bind(this);
this._animate = this._animate.bind(this);
this._onHover = this._onHover.bind(this);
this._onClick = this._onClick.bind(this);
this._onMouseDown = this._onMouseDown.bind(this);
this._onMouseMove = this._onMouseMove.bind(this);
this._onMouseUp = this._onMouseUp.bind(this);
this._getNodeColor = this._getNodeColor.bind(this);
// set initial state
this.state = {
viewport: {
width: 500,
height: 500
},
data: null,
iconMapping: null,
hovered: null,
clicked: null,
dragging: null,
lastDragged: null
};
/* eslint-disable max-len */
const dataConfig = [
{
data:
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/graph/sample-graph.json',
loader: requestJSON,
adaptor: GraphBasic,
hasNodeTypes: true
},
{
data:
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/graph/flare.json',
loader: requestJSON,
adaptor: GraphFlare,
hasNodeTypes: false
},
{
data:
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/graph/facebook-SNAP.csv',
loader: requestCSV,
adaptor: GraphSNAP,
hasNodeTypes: false
}
];
/* eslint-enable max-len */
const loader = dataConfig[DATASET].loader;
loader(dataConfig[DATASET].data, (error, response) => {
if (!error) {
// "adaptors" are used to parse data into the format
// required by your layout (e.g. nodes and links arrays for d3-force),
// and to manage addition / removal of graph elements.
const GraphAdaptor = dataConfig[DATASET].adaptor;
const graph = new GraphAdaptor(response);
this.setState({
data: [graph]
});
}
});
// only set up icon accessors for sample datasets that have types to be represented as icons.
if (dataConfig[DATASET].hasNodeTypes) {
// load icon atlas
requestJSON('./data/node-icon-atlas.json', (error, response) => {
if (!error) {
this.setState({
iconMapping: response
});
}
});
}
}