Hello, dear Habra community. One of the beautiful summer days, my friend called me and said that he has a very interesting task for me. I love interesting tasks. Arriving at the office the next day, we discussed the problem. The task, in a nutshell, was set as follows: to display on the browser canvas a hierarchy of ~ 30,000 users with a dependency between them, plus there must be some animation that is not relevant in the context of this post, maybe in future, if there is time and your approval.
We shook hands, I said that I needed to carry out "surveys", because the sphere (JS + Canvas) was new for me and find out how much the development of browser technologies corresponds to the realities of the task.
After a while, not for a long time, I stumbled upon a wonderful library -
sigmajs , at that time there was version 0.8.2, if the memory did not change me, which satisfied almost all of our ambitious needs.
')
Since then, a lot has happened, sigma version 1.0.0 has appeared, I have gained a new knowledge base in the field of JS + Canvas and the web as a whole. For those whom I have intrigued, I ask for a cat, which will give a brief overview of the library - sigmajs.
What is sigmajs?
Wave translation of the definition given by the author himself: Sigma JavaScript library designed for drawing graphs. It easily allows you to publish "networks" (columns) on Web pages, and allows developers to integrate, study (study) network (s) into Web applications.
Opportunities
- Sigma provides many options out of the box, such as rendering on Canvas and WebGL, or mouse and tach support, which makes the user’s interaction with the graph simple and convenient.
- The default configuration has mouse and tach support, graph redrawing and scaling, in response to changes in container size, render on WebGL canvas, if supported by a browser, or on 2D canvas, adapting node sizes (nodes of gaf) and edges to the screen size
- Almost all aspects of the work of sigma can be configured as you like through the settings, enable or disable interactive with the graph for the end user. You can also add custom render functionality for nodes or faces as you like.
- Sigma is a library for graph rendering, first of all, that's why you choose how graph will be interactive for the user, whether it will be interactive at all. The sigma API allows you to change the data for the graph, move the camera, subscribe to events, etc.
- GEXF format support for graph data
- Plugin support
Links
P / S The sigma authors have done a great job in the last half of the year. Thanks to them!
P / P / S If Habra to the community is interested in further detailed coverage of simgajs, whether it's translations of documentation or tutorials, write in comments
P / P / P / S Thanks for the time! I hope the information was useful for you =)