Project Report: NetJSONGraph.js Library of OpenWISP

During the three months of the summer, I participated in the GSOC project and worked at the OpenWISP community. My main job is to refactor the NetJSONGraph.js library to support canvas renders, geographic maps, and other interesting extensions. The reconstructed project structure is shown in the figure above. The library is still in early stage, feedback and contributions are very welcome !

Introduction to the project

NetJSONGraph.js is a javascript library based on Echarts and Leaflet that allows visualization of JSON data. The data format is based on networkgraph in NetJSON, but not exactly the same. Please see the project README for detail.

The main purpose of this refactoring is to achieve:

  • Support Canvas or SVG render
  • Support geographic base maps render
  • Support data real-time update

Of course, we also solved most of the problems and interesting features that mentioned in the issues, such as:

  • Handling multiple interface problems in NetJSON
  • Support nodes expand or fold
  • Support search data function
  • Support for multiple links (currently supports up to two)

All of these examples I put the links below the README, you can step there for the details.

Next step

  • Performance optimization of big data.

At present, the project still has some shortcomings in rendering big data. When the amount of data is tens of thousands, there will be obvious animation and interactive delay on the page.
Although we also support the `graphGL` type rendering mode, we can use the underlying GPU for accelerated calculation and rendering. But Echarts’ config in this area is not perfect, some of the styles can’t be customized, and some interactions also don’t work, such as link related events.

  • More detailed information about the trigger information triggered in metadata or click on elements.

Gabriel proposed that more fields can be added in metadata to display diverse information. For example, because there are different rendering modes: svg, canvas, graph, map, etc. We can try to add some special fields to represent different renderings.
From this point of view, we can also add more fields in nodeInfo, linkInfo to display diverse information, without having to stick to NetJSON data format.
For the time being, we have not implemented it yet. If you really need it, you can do this by rewriting the relevant built-in functions.

  • More detailed and understandable README.

Of course, I really hope that you can provide your valuable suggestions and make this project more perfect !


This is my first time to really participate in the open source community, full of curiosity about everything, but also strange. Looking back on the past, still vividly :

I remember that in the early days of the registration, I sent my demo and proposal draft to Federico Capoano (@nemesisdesign) with nervous mood. He quickly responded, and of course the result was not ideal. My draft is very general, there are no detailed plans and solutions, and there are some problems that are not even mentioned at all ! To be honest, this has hit me a bit, but since I did it, I have to do it best. After two revisions, under the guidance of the Fed, I finally made a relatively complete proposal.

In fact, writing proposal is like solving a problem. The only difference is that you only need to conduct general research and find the solutions to the problem, but you don’t need to implement it in detail. However, it laid a good foundation for the realization of the subsequent projects. As far as I am concerned, my previous research on the visual graphics library and the planning of the time management made my mid-term development more than enough, and also solved some library plug-in problems besides the project. This is also why proposal is an important basis for member’s selection. Good proposal represents good project completion in the future.

In the project development, Gabriel reminded me to do the test first, optimize the code structure, Fed reminded me to pay attention to the code specification and project structure, they gave me a lot of help, I really appreciate them.

In the OpenWISP community, there are also many partners here. Everyone asked questions and helped each other in the community. The familiarity and sense of belonging to the community increased day by day.

The three months experience have undoubtedly broadened my horizons, as if opened the door to the new world for me. I am very grateful to Google for providing this platform and opportunity. I hope to continue to contribute to the open source community next time.

I also highly recommend that you come to participate in GSOC, where you can not only improve your professional skills, but also contribute to your favorite community and meet many like-minded partners !



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store