React + D3.js + Canvas : challenges for a visual representation of an infrastructure

Assitan Koné
Dec 3, 2019 · 2 min read

The goal of this application is to represent visually the services, processes, etc.

Image for post
Image for post
The project

We agreed to do a force-directed graph like this one http://visualdataweb.de/webvowl/#. But because there are more than 300 nodes to represent and for performance reasons, we chose canvas over SVG.

Image for post
Image for post
The demo

The purpose

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.

The config

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.

The process

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
  • Zooming/dragging
  • Searching

The difficulties

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 base of the code

Future

The aim was to create a base and then to open source it. It’s the perfect project for a SRE team.

Synthesio Engineering

A fun yet professional team of engineers that works…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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