Data Visualisation in Mindmap using Angular
For every business or trading, it is crucial to track down all the necessary investments and portfolios, analyze the stakeholders, and also the company’s profits and losses. Getting the reports for resources used for that business is also essential. And that’s where Data Analytics comes into the picture. Comparison and analytics have always been a matter of expertise. It has impacted hugely on the economy of specific industries and gets the visual representation of the available data.
There are many libraries available in the market for javascript frameworks that enable developers to implement responsive structures like graphs or charts of the data points available with visualization components. It is now easier to analyze data in single-page applications as well. However, it depends on how big the data is and the graphical representation the business requires, and accordingly, any javascript library has to be chosen.
Mind-map is one such graph that can help to organize and visualize thoughts and represent the relationships of entities and other resources. It is often created on paper after curating all the ideas and requirements of the companies. For this kind of visualization, force-directed graphs or disjoint-directed graphs can be used. We have tried and tested a few libraries which deliver the user interface that is a bit close to our requirements.
Let’s take a look at a few libraries and their respective features.
Ngx-graph
Ngx-Graph is an open-source library developed by Swimlane, an automated cyber security platform. This library enables users to create a graph with its minimap and the main graph. Also, there are functionalities like zoom, animate, and offset, and the charts fit the window the user provides.
The main inputs for generating graphs are nodes and edges with the following format:
JSmind
Jsmind is an open source library designed purely in javascript and can be integrated with other javascript frameworks. Three formats are supported by jsMind: node-tree format, node-array format, and freemind format. jsMind can load either format below and export data for any format. You can create a new object of jsmind and pass the options.
Wrapper libraries have also been created for specific frameworks such as Angular, React, etc., so the developers can adapt the code according to the component lifecycle.
Features:
- Uses angular material library too for animations. So, the graph generated cannot be customized with CSS and data.
- A Javascript container is used to render the graph.
- Data Formats require two JSON– Data and Edges.
- Animation while loading the graph is required but it cannot be added.
D3.js
Data-Driven Documents or D3.js is a JavaScript library for data visualization in the forms of SVG, canvas, or HTML. It manipulates DOM with various data-driven techniques and is customizable simultaneously. It is also compatible with almost all web browsers. It also supports Node and web workers, so the data can be visualized at server-side rendering as well.
D3.js is considered the standard library for data visualization and many other libraries have been developed as a wrapper for the same.
Observable is used to play around with D3.js latest versions. D3.js version 4 and below are purely in javascript and support IE browser. Since D3.js supports javascript, it can be easily adapted to any of the frameworks from the UI side and customized wholly based on the requirements as it directly works with HTML DOM.
Force-graph
A graph rendered on HTML5 canvas and a javascript library developed using d3.js’s d3-force to create an outcome that supports zoom, dragging, panning, and customizing with its config options.
A new object should be created after installing the library and the data should be provided in the code as shown below:
One of the interesting features of this library is that it also provides an option to pause the animation for the user.
Mind-Wired
Mind-Wired(mind-wired.js) and its respective styling library(mind-wired.css) is a javascript library specially designed for mind map creation. This library has open issues with zoom and drag functionality. So if the developer’s requirements are just for creating the graph and styling the nodes and edges with CSS and images, this library is easy to adapt and the code structure is simple to understand. An array of nodes is specified in the javascript code which includes its child node and each contains the coordinates and view object.
Node structure typically consists of three values — model, view, and subs.
Conclusion
After researching quite a few libraries, we concluded that d3.js is the old and gold standard library for generating graphs as it creates the UI by manually specified nodes and edges and gives the styling that a developer needs. But if styling is not an issue and the main purpose of creating a mind-map is putting down thoughts and creative ideas then all of the above can be used easily as they all are javascript-based and open source libraries, so they are cost effective as well.
Special mention to Mukund and Harshal for helping me with this article.
