React + D3.js + Canvas : challenges for a visual representation of an infrastructure
The goal of this application is to represent visually the services, processes, etc.
We wanted to create an open-source project, therefore, it was obvious to find an open-source tool. D3.js matches well. Also this project needed a straightforward setup process.
Finally there is a config system to have an agnostic application.
We decided to use React for the front-end and Go for the back-end.
We used react-create-app instead of setup the project ourselves.
We used hooks and the actions and reducers are tested with Jest. We added ESLint with Airbnb config. Finally, we set up rules and a pre-commit git hook system with husky. In sum, a classic configuration.
It was complicated to find some examples online in canvas unlike in SVG, so we had to experiment a lot.
We mostly used this example https://bl.ocks.org/jodyphelan/5dc989637045a0f48418101423378fbd
We wanted basic features for a start :
- Display the status
- Display the type
- Display informations when clicking on the node
Force/strength calculation :
We struggle to find the right balance to have a logical graph.
Drawing arrows :
The graph is not in SVG so we had to do some trigonometry.
Most difficulties was in D3 because we didn’t know this library well and the fact that there are just a few examples in canvas.
Also we wanted to find a way to differentiate the nodes so we thought about shapes or images. For now the nodes have a color corresponding to a specific type and the status are shown with a circle around the node.
The aim was to create a base and then to open source it. It’s the perfect project for a SRE team.