Visually visual graphical graphs
Before I knew anything about web development, I heard D3 (document driven data) was the trend for creating dynamically appealing graphs through Javascript. As I began to dive deep into my Javascript learning, I wanted a way to visually manipulate my data so that it can allow users to understand graphs better. That’s when I finally decided I wanted to use D3 for the very first time. However, after reading through several documentations, I realized D3 was geared towards graphs and charts that were mostly static. D3 is for arbitrary SVG, meaning that it can be used to make lots of different things, but you have to build the renderer, interaction, and model yourself. Though D3 can be manipulated (through several hoops and turns), I realized I didn’t need this much firepower and wanted a simpler way to provide interactivity through data.
In comes Cytoscape.js, a unique graph library allows you to easily display and manipulate rich, interactive graphs. In other words, Cytoscape.js is a library focused just on graph theory (networks). It has a builtin, performant renderer, it has gestures and events, and a sophisticated graph model out of the box. Because it’s more focused, Cytoscape.js lets you do much more with your graphs with less code — but unfortunately, you can’t use it for things like bar charts or point charts.
On a surface level understanding, the Cytoscape graphs are centralized around nodes with pointers (edge). Each node has a sense of reference to the node it points to and so on. For instance, think of a Git workflow. While you are making Git commits, your previous commits will always point towards your newest commit to indicate the directional flow of your work. In this approach, each node will always move in a uni-directional path and cannot point back to itself, or reverse in time (or so to speak). This follows up with directed acyclic graphs (DAG), check it out here.
In my soon-to-be-finished project, I’ve worked with a great team engineers to create a visual representation of a Git tree to keep track of team member’s local Git activity in real-time using Cytoscape.js to display the interactive graph. You can check us out on Github !
