Data Flow Map using Cytoscape and Vue.js

We are going to create a Data Flow Map using Cytoscape and Dagre layout using Vue.js

Link to the sandbox: https://codesandbox.io/s/github/YajanaRao/data-flow-map

Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data.

In this blog we are going to create a Animal Classification flow chart.

Nodes

Below is the data sample of nodes of the data flow chart.

const nodes = [{
  data: {
   id: 0,
   name: "Animal",
   description: "",
   active: true,
   width: 140,
  },
 },
 {
  data: {
   id: 1,
   name: "Mammal",
   description: "",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 2,
   name: "Reptile",
   description: "",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 3,
   name: "Horse",
   description: "",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 4,
   name: "Dog",
   description: "Join",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 5,
   name: "Goat",
   description: "Branch Out",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 6,
   name: "Hound",
   description: "",
   active: false,
   width: 140,
  },
 },
 {
  data: {
   id: 7,
   name: "German Shephard",
   description: "",
   active: false,
   width: 140,
  },
 },
];

Here active key represents active node of the chart which will be displayed in green box. width attribute is used to calculate the width of the node container based on the inner text length.

Edges

Edges are used to create the relationship between the nodes. source and target are used to relate between the nodes. id of nodes are used here in source and target properties.

const edges = [
  { data: { source: 0, target: 1, label: "Sub" } },
  { data: { source: 0, target: 2, label: "Sub" } },
  { data: { source: 1, target: 3, label: "Sub" } },
  { data: { source: 1, target: 4, label: "Sub" } },
  { data: { source: 1, target: 5, label: "Sub" } },
  { data: { source: 4, target: 6, label: "Sub" } },
  { data: { source: 4, target: 7, label: "Sub" } },
];

label is used as the text above the link between the nodes. It can be used to define the type of relation between the nodes.

Chart

Let’s create a method called drawGraph inside vuemethods . We initialize the dagre layout at the top followed by cytoscape configuration. node and edge selector is used to style each node and edge of the data. Inside layout dagre is configured.

drawGraph() {
  cydagre(cytoscape);
  const cy = cytoscape({
    container: document.getElementById("cy"),
    boxSelectionEnabled: false,
    autounselectify: true,
    style: cytoscape
      .stylesheet()
      .selector("node")
      .css({
        shape: "roundrectangle",
        height: 40,
        width: "data(width)",
        "background-color": (node) =>
          node.data("active") ? "green" : "white",
        color: (node) => (node.data("active") ? "white" : "black"),
        "border-color": "gray",
        "border-width": 3,
        "border-radius": 4,
        content: "data(name)",
        "text-wrap": "wrap",
        "text-valign": "center",
        "text-halign": "center",
      })
      .selector("edge")
      .css({
        // http://js.cytoscape.org/#style/labels
        label: "data(label)", // maps to data.label
        "text-outline-color": "white",
        "text-outline-width": 3,
        "text-valign": "top",
        "text-halign": "left",
        // https://js.cytoscape.org/demos/edge-types/
        "curve-style": "bezier",
        width: 3,
        "target-arrow-shape": "triangle",
        "line-color": "gray",
        "target-arrow-color": "gray",
      }),
    elements: {
      nodes: nodes,
      edges: edges,
    },
    layout: {
      name: "dagre",
      spacingFactor: 1.5,
      rankDir: "LR",
      fit: true,
    },
  });
},

Complete source code is available in the github repository: https://github.com/YajanaRao/data-flow-map

Link to the codesandbox: https://codesandbox.io/s/github/YajanaRao/data-flow-map