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

Finally there is a config system to have an agnostic application.

The config

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

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

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

Synthesio Engineering

A fun yet professional team of engineers that works…

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