Hierarchical Graph Visualization with Cytoscape.js in Angular

Introduction

Hierarchical graph is essential to indicate relationships for devices or members of organizations.

In this article, we’ll take a brief look at the comparison of well-known hierarchical graph solutions— HighCharts, ECharts, and Cytoscape.js.

We’ll go through how to create a hierarchical graph in an Angular application with Cytoscape.js including common layout and curve style.

Agenda

There are a few topics in this article.

• Technical Decision: HighCharts, ECharts, Cytoscape
• Prepare Environments
• Create Component, Services, and Models for Cytoscape.js
• Create Configurations for Cytoscape.js
• Customize Nodes or Edge with Cytoscape-popper
• Create Tooltips with tippy.js
• Change Layout Types
  - preset
  - breadthfirst
  - klay
• Change Curve style types
  - segments
  - unbundled-bezier
  - bezier
  - taxi

About this series

This series aims to learn technologies for visualization.

• Article 1. Chart Visualization with HighCharts and ECharts in React