How to use vis-data - 6 common examples

color: this.buildGroupColor(theme.port),
          size: 10,
          image: portImg
        },
        switch: {
          shape: 'image',
          color: this.buildGroupColor(theme.switch),
          size: 25,
          image: switchImg
        }
      }
    }

    // Create and fill datasets
    const nodes = this.nodes = new DataSet()
    const edges = this.edges = new DataSet()
    // It's necessary to load the items now, otherwise the network would be labeld as ready before the items are visible.
    this.replaceItems()

    // Create the network
    const net = new Network(this.$refs.vis, { nodes, edges }, options)
    this.net = net

    // Some labels contain placeholders for info from connected nodes.
    // Therefore this can't be done before the topology is built.
    this.updateLabels()

    this.cleanUpCallbacks.push(this.$store.subscribe(({ type, payload }, { data }) => {
      ;(this.storeActions[type] || (() => {}))(payload, data)
    }))

    this.$emit('ready', { container, net, nodes, edges })

setData(nodes, doNotEmit = false) {
    let oldNodesData = this.body.data.nodes;

    if (nodes instanceof DataSet || nodes instanceof DataView) {
      this.body.data.nodes = nodes;
    }
    else if (Array.isArray(nodes)) {
      this.body.data.nodes = new DataSet();
      this.body.data.nodes.add(nodes);
    }
    else if (!nodes) {
      this.body.data.nodes = new DataSet();
    }
    else {
      throw new TypeError('Array or DataSet expected');
    }

    if (oldNodesData) {
      // unsubscribe from old dataset
      util.forEach(this.nodesListeners, function (callback, event) {
        oldNodesData.off(event, callback);
      });
    }

shape: 'image',
          color: this.buildGroupColor(theme.port),
          size: 10,
          image: portImg
        },
        switch: {
          shape: 'image',
          color: this.buildGroupColor(theme.switch),
          size: 25,
          image: switchImg
        }
      }
    }

    // Create and fill datasets
    const nodes = this.nodes = new DataSet()
    const edges = this.edges = new DataSet()
    // It's necessary to load the items now, otherwise the network would be labeld as ready before the items are visible.
    this.replaceItems()

    // Create the network
    const net = new Network(this.$refs.vis, { nodes, edges }, options)
    this.net = net

    // Some labels contain placeholders for info from connected nodes.
    // Therefore this can't be done before the topology is built.
    this.updateLabels()

    this.cleanUpCallbacks.push(this.$store.subscribe(({ type, payload }, { data }) => {
      ;(this.storeActions[type] || (() => {}))(payload, data)
    }))

}
      }
    }
  }

  // Update table
  var table = {};
  table.data = { edges: edges, nodes: nodes };
  table.entries = _.reduce(table.data.nodes, (nodeMap, node) => {
    nodeMap[node.name] = updateObject(node, getElementFromScenario(scenario, node.id));
    return nodeMap;
  }, {});

  // Update visualization data
  var visData = {};
  visData.nodes = new visdata.DataSet(nodes);
  visData.edges = new visdata.DataSet(edges);

  // Update map data
  var mapData = {};
  mapData.ueList = _.sortBy(ueList, ['assetName']);
  mapData.poaList = _.sortBy(poaList, ['assetName']);
  mapData.computeList = _.sortBy(computeList, ['assetName']);

  return { table: table, visData: visData, mapData: mapData };
}

setData(edges, doNotEmit = false) {
    var oldEdgesData = this.body.data.edges;

    if (edges instanceof DataSet || edges instanceof DataView) {
      this.body.data.edges = edges;
    }
    else if (Array.isArray(edges)) {
      this.body.data.edges = new DataSet();
      this.body.data.edges.add(edges);
    }
    else if (!edges) {
      this.body.data.edges = new DataSet();
    }
    else {
      throw new TypeError('Array or DataSet expected');
    }

    // TODO: is this null or undefined or false?
    if (oldEdgesData) {
      // unsubscribe from old dataset
      util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);});
    }

    // remove drawn edges

}
    }
  }

  // Update table
  var table = {};
  table.data = { edges: edges, nodes: nodes };
  table.entries = _.reduce(table.data.nodes, (nodeMap, node) => {
    nodeMap[node.name] = updateObject(node, getElementFromScenario(scenario, node.id));
    return nodeMap;
  }, {});

  // Update visualization data
  var visData = {};
  visData.nodes = new visdata.DataSet(nodes);
  visData.edges = new visdata.DataSet(edges);

  // Update map data
  var mapData = {};
  mapData.ueList = _.sortBy(ueList, ['assetName']);
  mapData.poaList = _.sortBy(poaList, ['assetName']);
  mapData.computeList = _.sortBy(computeList, ['assetName']);

  return { table: table, visData: visData, mapData: mapData };
}