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.

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.

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 together to build a world class Social Intelligence platform

Assitan Koné

Written by

Front-end developer

Synthesio Engineering

A fun yet professional team of engineers that works together to build a world class Social Intelligence platform

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade